How to implement CupertinoActionSheet in Flutter

How To Implement Cupertino Action Sheet In Flutter

Cupertino is group of widgets to implement iOS-style UI in flutter applications. To integrate android style UI, we use a material widget instead of a Cupertino widget. Using the Cupertino action sheet, we can display two or more options to users with title and message. So users can select one option from it according to his/her choice.

Also read: How to implement BottomSheet in Flutter

CupertinoActionSheet widget has many properties. Using the title property, we can display titles with customization in the Cupertino sheet. We can also display the message text below the title using the message property. Actions property is used to display multiple options in the Cupertino action sheet. So the user can select any one option and we can navigate the user to a new screen or we can also do any other thing.

We can also control the scrolling of actions in the Cupertino sheet using the actionScrollController widget. We can also display the cancel button below Cupertino sheet actions. So user can also close the Cupertino action sheet by tapping on it if we call a pop method of navigating in onPressed callback of cancel button. In this guide, we will discuss How to implement iOS Styled CupertinoActionSheet in Flutter

Some of the Properties used in the Cupertino Action Sheet are given below.

actionsThe set of actions that are displayed for the user to select
actionScrollControllerA scroll controller that can be used to control the scrolling of the actions in the action sheet
cancelButtonThe optional Cancel button is grouped separately from the other actions
messageAn optional descriptive message that provides more details about the reason for the alert.
titleAn optional title of the action sheet. When the message is non-null, the font of the title is bold.
messageScrollControllerA scroll controller that can be used to control the scrolling of the [message] in the action sheet.

Let’s take an example of how we can implement the Cupertino Action Sheet in our flutter application.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CupertinoScreen extends StatefulWidget {
  const CupertinoScreen({Key? key}) : super(key: key);

  @override
  State<CupertinoScreen> createState() => _CupertinoScreenState();
}

class _CupertinoScreenState extends State<CupertinoScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Cupertino Action Sheet'),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () {
                showCupertinoModalPopup<void>(
                  context: context,
                  builder: (BuildContext context) => CupertinoActionSheet(
                  
                    title: const Text('Football',
                        style: TextStyle(
                            fontSize: 30, fontWeight: FontWeight.bold)),
                    message: const Text(
                      'How is your best Player?',
                      style: TextStyle(fontSize: 18),
                    ),
                    actions: <CupertinoActionSheetAction>[
                      CupertinoActionSheetAction(
                        isDefaultAction: true,
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: const Text('Robert Lewandowski'),
                      ),
                      CupertinoActionSheetAction(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: const Text('Mane and Sane'),
                      ),
                    ],
                    cancelButton: CupertinoActionSheetAction(
                      child: const Text(
                        'Cancel',
                        style: TextStyle(color: Colors.red),
                      ),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                  ),
                );
              },
              child: const Text('Show Cupertino Sheet'),
            ),
          )
        ],
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

If we click the “Show Cupertino Sheet” button, we will see the message at the bottom of the screen. which is shown below

Thank you for reading the Guide about How to implement the Cupertino Action Sheet in Flutter.