Flutterexperts

This is the first article of our Know Your Widgets series.

Know Your Widgets is a brand new series in which we’ll be explaining all the important widgets that you should know when starting to develop applications in Flutter.

We have decided to dive into all the flutter widgets and try to explain each one to you.

In this article, I am going to show you How to use CupertinoActionSheet.

If you are wondering what is Cupertino then

Cupertino in Flutter is a set of widgets implementing the current iOS design language.

Have a look

An action sheet is a specific style of alert that presents the user with a set of two or more choices related to the current context.

An action sheet can have a title, an additional message, and a list of actions. The title is displayed above the message and the actions are displayed below this content.

This action sheet styles its title and message to match standard iOS action sheet title and message text style.

First of all, we need to import the Cupertino package

package:flutter/cupertino.dart

Everything in flutter is a Widget so is CupertinoActionSheet, we can use it anywhere in the layout but we want our ActionSheet to show it in with a modal sheet.

So we will use

showCupertinoModalPop

In this, we have two required parameters

@required BuildContext context,
@required WidgetBuilder builder,

Now

showCupertinoModalPopup( 
context: context, 
builder: (BuildContext context) => CupertinoActionSheet());

In CupertinoActionSheet we have title:, message: and actions:

CupertinoActionSheet(                                 
title: const Text('Choose Options'),                                 message: const Text('Your options are'),                                 actions: <Widget>[]
);

Inside actions: <Widget>[] we will list all the options that we are required to show.

To show a particular option item in the actions: <Widget>[] , we will use a CupertinoActionSheetAction()widget.

CupertinoActionSheetAction( 
child: const Text(‘Option 1’), 
onPressed: () { 
//do some action 
}
);

We can add as many as CupertinoActionSheetAction()inside actions: <Widget>[].

Now the code will look like this

showCupertinoModalPopup(
  context: context,
  builder: (BuildContext context) => CupertinoActionSheet(
      title: const Text('Choose Options'),
      message: const Text('Your options are '),
      actions: <Widget>[
        CupertinoActionSheetAction(
          child: const Text('One'),
          onPressed: () {
            Navigator.pop(context, 'One');
          },
        ),
        CupertinoActionSheetAction(
          child: const Text('Two'),
          onPressed: () {
            Navigator.pop(context, 'Two');
          },
        )
      ],
      ),
);

In CupertinoActionSheet()

we also have cancel button parameter in, it just separates a single option with other options inactions: <Widget>[]

cancelButton: CupertinoActionSheetAction(            
child: const Text('Cancel'),            
isDefaultAction: true,            
onPressed: () {              
Navigator.pop(context, 'Cancel');            
},          
)),

it will look like this

Now Let’s see the actual code

showCupertinoModalPopup(
  context: context,
  builder: (BuildContext context) => CupertinoActionSheet(
      title: const Text('Choose Options'),
      message: const Text('Your options are '),
      actions: <Widget>[
        CupertinoActionSheetAction(
          child: const Text('One'),
          onPressed: () {
            Navigator.pop(context, 'One');
          },
        ),
        CupertinoActionSheetAction(
          child: const Text('Two'),
          onPressed: () {
            Navigator.pop(context, 'Two');
          },
        )
      ],
      cancelButton: CupertinoActionSheetAction(
        child: const Text('Cancel'),
        isDefaultAction: true,
        onPressed: () {
          Navigator.pop(context, 'Cancel');
        },
      )),
);

---

Now You are good to go

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---