Cupertino Action Sheet

Hi Guys, welcome to Proto Coders Point, In this Flutter Programming Tutorial we will Implement  Cupertino Action Sheet Flutter Widget

What is Cupertino Action Sheet in flutter?

Cupertino Action sheet is simple an iOS action sheet that pops up from the bottom of the screen.

An Cupertino 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.

This Cupertino action sheet looks like a standard iOS action button, that Provides CupertinoActionSheetAction to the action provided.

Check out the Official site to learn more 

This is how Cupertino Action Sheet pops up  from bottom of screen

Cupertino Action Sheet Widget- Flutter Programming
Cupertino Action Sheet Widget- Flutter Programming

Properties of the CupertinoActionSheet

actions : that Display a list of action button that help the user to select any one.

title: Show the Title of CupertinoActionSheet on the top of the list.

message: describe the user what the user can select from his choice.

messageScrollController: If message to the user is too long that the user can easily scroll through the message to read it.

cancelButton: This properties is been optional, the cancel Button is been grouped separately from the other actions.

For more Visit Official Flutter site

CupertinoActionSheet implementation

So Now we have done with learning basic information about this widget.

Now it’s time to implement the Cupertino Action sheet Widget.

As usual you need to create a new Flutter project, or implement it in your existing flutter project it your choice.

So I am using Android-studio to create a new flutter Project.

File> New > New Flutter Project

Fill are the required staff.

Create a RaisedButton that can activate CupertinoActionSheet

As you Flutter Project is ready you need to remove all the existing flutter code that is been by-default added into your project by Google flutter team.

I Assume that you have removed all the default flutter code. Ok

Then, you need to create a RaiseButton inside body tag as displayed in below snippet Flutter code.

body: Center(
        child: RaisedButton(
          onPressed: () {
           //Cupertino Action sheet will come over here
          },
          child: Text("Click me "),
        ),
      ),

Here, i have a center widget that will bring all the widget at the center of the screen, Here there is a child widget RaisedButton that simply create a button widget at the center of the body tag.

RaisedButton have a Function method onPressed that triggers when the user click on Raised Button.

CupertinoActionSheet Snippet Code

Then here, i have a CupertinoActionSheet with a title that simply display a text, and Message that display the description of the popup menu.

Then, i Have actions widget that is simply a array list of Cupertino Option Menus

In the Below Snippet code i have created 2 actions button that can perform different actions.

isDefaultAction: is set to true because the action button text will be displayed with blue color.

isDestructiveAction: is set to true that display action button text in red color.

CupertinoActionSheet(
              title: Text("Cupertino Action Sheet"),
              message: Text("Select any action "),
              actions: <Widget>[
                CupertinoActionSheetAction(
                  child: Text("Action 1"),
                  isDefaultAction: true,
                  onPressed: () {
                    print("Action 1 is been clicked");
                  },
                ),
                CupertinoActionSheetAction(
                  child: Text("Action 2"),
                  isDestructiveAction: true,
                  onPressed: () {
                    print("Action 2 is been clicked");
                  },
                )
              ],
);

cancelButton: this is an optional

CupertinoActionSheetAction(
               child: Text("Action 1"),
               isDefaultAction: true,
               onPressed: () {
                 print("Action 1 is been clicked");
               },
             ),
             CupertinoActionSheetAction(
               child: Text("Action 2"),
               isDestructiveAction: true,
               onPressed: () {
                 print("Action 2 is been clicked");
               },
             )
           ],
           cancelButton: CupertinoActionSheetAction(
             child: Text("Cancel"),
             onPressed: () {
               Navigator.pop(context);
             },
           ),
         );

Then, here i have an cancelButton that simply pop the current context that is running on the screen.

That means when user click ok cancel Action Button the CupertinoActionSheet will get Closed

How to show CupertinoActionsheet widget?

showCupertinoModalPopup(
                context: context, 
                builder: (context) => action  //action is final variable name 

);

 

Complete Cupertino Action Sheet Flutter widget source Code

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Cupertino Action sheet demo"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            final action = CupertinoActionSheet(
              title: Text(
                "Proto Coders Point",
                style: TextStyle(fontSize: 30),
              ),
              message: Text(
                "Select any action ",
                style: TextStyle(fontSize: 15.0),
              ),
              actions: <Widget>[
                CupertinoActionSheetAction(
                  child: Text("Action 1"),
                  isDefaultAction: true,
                  onPressed: () {
                    print("Action 1 is been clicked");
                  },
                ),
                CupertinoActionSheetAction(
                  child: Text("Action 2"),
                  isDestructiveAction: true,
                  onPressed: () {
                    print("Action 2 is been clicked");
                  },
                )
              ],
              cancelButton: CupertinoActionSheetAction(
                child: Text("Cancel"),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            );

            showCupertinoModalPopup(
                context: context, builder: (context) => action);
          },
          child: Text("Click me "),
        ),
      ),
    );
  }
}