Know Your Widgets: #1 Cupertino (iOS-style) ActionSheet in Flutter

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

Cupertino ActionSheet

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');

},

)

],

),

);

CupertinoActionSheetAction in CupertinoActionSheet

In CupertinoActionSheet()

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

cancelButton: CupertinoActionSheetAction(

child: const Text('Cancel'),

isDefaultAction: true,

onPressed: () {

Navigator.pop(context, 'Cancel');

},

)),

it will look like this

Cancel in CupertinoActionSheet

Now Let’s see the actual code