Preloader
 
Home / Blog / Know Your Widgets: #1 Cupertino (iOS-style) ActionSheet in Flutter
6February 2019

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

What is an 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.

Why use?

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

How to implement it?

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 in the comments. I would love to improve.

FlutterDevs has been working on Flutter from quite some time now. You can connect with us on Facebook and Twitter for any flutter related queries.

BY Ashish Rawat 0 Read More

Leave a Reply

Your email address will not be published. Required fields are marked *