Building CupertinoActionSheet in Flutter

Flutter offers a rich set of widgets and tools to create beautiful, natively compiled applications, and among these is the CupertinoActionSheet widget. Building CupertinoActionSheet in Flutter can greatly enhance the user experience in your iOS-styled applications by providing an easy way to display a list of options or actions to the user. In this guide, we’ll walk through the steps and code needed to integrate CupertinoActionSheet effectively in your Flutter project.

Understanding the CupertinoActionSheet Widget in Flutter

The CupertinoActionSheet is a part of Flutter’s Cupertino library, which provides iOS-style widgets. This widget is useful for presenting the user with a set of choices in a modal popup that slides up from the bottom of the screen. It’s typically used to present actions related to the current context. Let’s explore how to set up a CupertinoActionSheet in a Flutter application.

To begin with, you need to import the necessary Cupertino widgets package. Here’s how you can start:

import 'package:flutter/cupertino.dart';

Once imported, you can create a function that triggers the CupertinoActionSheet. Below is an example of how to implement a basic CupertinoActionSheet in a Flutter app:

void _showActionSheet(BuildContext context) {
  showCupertinoModalPopup(
    context: context,
    builder: (BuildContext context) => CupertinoActionSheet(
      title: Text('Choose an Option'),
      message: Text('Select one of the following options'),
      actions: [
        CupertinoActionSheetAction(
          child: Text('Option 1'),
          onPressed: () {
            Navigator.pop(context, 'Option 1');
          },
        ),
        CupertinoActionSheetAction(
          child: Text('Option 2'),
          onPressed: () {
            Navigator.pop(context, 'Option 2');
          },
        ),
      ],
      cancelButton: CupertinoActionSheetAction(
        child: Text('Cancel'),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    ),
  );
}

Customizing CupertinoActionSheet in Flutter

Building CupertinoActionSheet in Flutter allows for extensive customization to match the design and functionality needs of your app. You can modify text styles, add icons, and even include custom widgets if needed. Here’s how you can customize the appearance and behavior of the CupertinoActionSheet:

To change the style of the title and message, you can use the Text widget’s style property. Here’s an enhanced version of the ActionSheet with custom styles:

CupertinoActionSheet(
  title: Text(
    'Select an Action',
    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  ),
  message: Text(
    'Your choices below',
    style: TextStyle(fontSize: 16, color: CupertinoColors.systemGrey),
  ),
  actions: [
    CupertinoActionSheetAction(
      child: Row(
        children: [
          Icon(CupertinoIcons.share),
          Text(' Share'),
        ],
      ),
      onPressed: () {
        Navigator.pop(context, 'Share');
      },
    ),
    CupertinoActionSheetAction(
      child: Row(
        children: [
          Icon(CupertinoIcons.delete),
          Text(' Delete'),
        ],
      ),
      onPressed: () {
        Navigator.pop(context, 'Delete');
      },
    ),
  ],
  cancelButton: CupertinoActionSheetAction(
    child: Text('Dismiss'),
    onPressed: () {
      Navigator.pop(context);
    },
  ),
)

By following these examples, you can effectively build and customize a CupertinoActionSheet to suit your app’s requirements.

In conclusion, Building CupertinoActionSheet in Flutter is a straightforward process that enhances your iOS app interface by providing a familiar and intuitive way for users to interact with options and actions. By leveraging the Cupertino library, you can ensure that your Flutter app provides a seamless and native iOS experience.