Creating Beautiful Cupertino Action Sheets in Flutter: A Comprehensive Guide

To create attractive and functional Cupertino action sheets using the CupertinoActionSheet widget. 

The post will cover everything from the basics of creating a simple action sheet to more advanced topics like customizing the design and layout of the action sheet and handling user interactions.

By the end of the post, developers will have the knowledge and skills needed to create their own beautiful and effective Cupertino action sheets for their Flutter apps.

#1 Show a modal popup that contains a CupertinoActionSheet widget

      final textTheme = Theme.of(context)
          .textTheme
          .apply(displayColor: Theme.of(context).colorScheme.onSurface);

// Show a modal popup that contains a CupertinoActionSheet widget
      showCupertinoModalPopup(
          context: context,
          builder: (BuildContext context) =>
              CupertinoActionSheet(
                title: TextStyleExample(name : 'Title',style : textTheme.headlineSmall!.copyWith(color: Theme.of(context).colorScheme.primary,letterSpacing: 0.1)),
                message: TextStyleExample(name : 'Your description is here',style : textTheme.bodyMedium!.copyWith(letterSpacing: 0.1)),
                actions: <Widget>[
                  // List of actions
                  CupertinoActionSheetAction(
                    child: TextStyleExample(name : 'Action 1',style : textTheme.titleMedium!.copyWith(color: Theme.of(context).colorScheme.secondary)),
                    onPressed: () {
                      Navigator.pop(context); // Close the modal popup
                    },
                  ),
                  CupertinoActionSheetAction(
                    child: TextStyleExample(name : 'Action 2',style : textTheme.titleMedium!.copyWith(color: Theme.of(context).colorScheme.secondary)),
                    onPressed: () {
                      Navigator.pop(context); // Close the modal popup
                    },
                  ),
                  CupertinoActionSheetAction(
                    child: TextStyleExample(name : 'Action 3',style : textTheme.titleMedium!.copyWith(color: Theme.of(context).colorScheme.secondary)),
                    onPressed: () {
                      Navigator.pop(context); // Close the modal popup
                    },
                  )
                ],
                // A cancel button at the bottom of the modal popup
                cancelButton: CupertinoActionSheetAction(
                  child: TextStyleExample(name : 'Close',style : textTheme.titleLarge!.copyWith(color: Colors.grey,letterSpacing: 0.1)),
                  onPressed: () {
                    Navigator.pop(context); // Close the modal popup
                  },
                ),
              )
      );

To use the showCupertinoModalPopup() method to show a modal popup that contains a CupertinoActionSheet widget. The CupertinoActionSheet is a popup that presents a set of actions a user can take in response to a particular prompt or situation.

The showCupertinoModalPopup() method is called with the context and a builder method that returns a CupertinoActionSheet. The CupertinoActionSheet widget contains a title, message, list of actions, and a cancel button.

The textTheme object is created to apply the display color to the text using the apply() method. The title and message are styled using TextStyleExample widget, which applies the text style to the text using the copyWith() method. The actions property contains a list of CupertinoActionSheetAction widgets that represent the actions a user can take. When an action is selected, the popup is closed by calling Navigator.pop(context).

Finally, a cancelButton is added at the bottom of the CupertinoActionSheet to allow the user to close the popup without selecting any of the actions. The cancelButton is also styled using the TextStyleExample widget.

This code is a great example for those learning to use the CupertinoActionSheet widget in their Flutter app. The post can be titled "How to use the CupertinoActionSheet widget in Flutter".

..

#2 Alert Dialog Selection

 final textTheme = Theme.of(context)
          .textTheme
          .apply(displayColor: Theme.of(context).colorScheme.onSurface); // Define the text theme for the dialog

      showCupertinoDialog(
        context: context,
        builder: (BuildContext context) => CupertinoAlertDialog(
          title: TextStyleExample(
            name: 'Title',
            style: textTheme.titleLarge!.copyWith(
              color: Theme.of(context).colorScheme.primary,
              letterSpacing: 0.1,
            ),
          ),
          actions: [
            CupertinoDialogAction(
              child: TextStyleExample(
                name: 'Item 1',
                style: textTheme.titleSmall!.copyWith(
                  color: Theme.of(context).colorScheme.secondary,
                ),
              ),
              onPressed: () {
                finish(context); // Close the dialog when the "Item 1" button is pressed
              },
            ),
            CupertinoDialogAction(
              child: TextStyleExample(
                name: 'Item 2',
                style: textTheme.titleSmall!.copyWith(
                  color: Theme.of(context).colorScheme.secondary,
                ),
              ),
              onPressed: () {
                finish(context); // Close the dialog when the "Item 2" button is pressed
              },
            ),
            CupertinoDialogAction(
              child: TextStyleExample(
                name: 'Item 3',
                style: textTheme.titleSmall!.copyWith(
                  color: Theme.of(context).colorScheme.secondary,
                ),
              ),
              onPressed: () {
                finish(context); // Close the dialog when the "Item 3" button is pressed
              },
            ),
            CupertinoDialogAction(
              child: TextStyleExample(
                name: 'Item 4',
                style: textTheme.titleSmall!.copyWith(
                  color: Theme.of(context).colorScheme.secondary,
                ),
              ),
              onPressed: () {
                finish(context); // Close the dialog when the "Item 4" button is pressed
              },
            ),
            CupertinoDialogAction(
              child: TextStyleExample(
                name: 'Close',
                style: textTheme.titleLarge!.copyWith(
                  color: Colors.grey,
                  letterSpacing: 0.1,
                ),
              ),
              onPressed: () {
                finish(context); // Close the dialog when the "Close" button is pressed
              },
            ),
          ],
        ),
      );

Above code snippet in Flutter for showing a Cupertino-style alert dialog with a title and a list of actions.

The first line of the code defines the text theme for the dialog based on the current theme of the app.

The showCupertinoDialog method is then called with the context parameter and a builder method that returns a CupertinoAlertDialog. The alert dialog has a title property, which is a TextStyleExample widget that contains the title text and the text style for the title.

The dialog also has an actions property, which is a list of CupertinoDialogAction widgets. Each CupertinoDialogAction widget represents a button in the dialog. In this code, there are four buttons labeled "Item 1", "Item 2", "Item 3", and "Item 4", and a fifth button labeled "Close". Each button has an onPressed property that calls the finish function with the current context, which will close the dialog.

The text style for the buttons is defined using a TextStyleExample widget, which takes the text and the text style as its parameters. The text style is based on the current text theme of the app, and the color of the buttons is based on the current color scheme of the app.

..

..

GET source code on Github: