ActionSheet in Flutter

ActionSheet in Flutter

aseemwangoo No Comment
Flutter

Actions speak louder than words…

A thing of beauty is joy forever!!!

Adamantly quoted and holds true from programming aspect… In my previous post, segmented control in flutter, I admitted my affection towards iOS.

Persisting my love, and wandering through the documents of Flutter, until a familiar type of widget struck me..You know which 🙂

ActionSheet

ActionSheet

ActionSheet

Flutter has provided us this functionality asCupertinoActionSheet. In order to use this, we need to import :

import ‘package:flutter/cupertino.dart’;

According to the Flutter doc:

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.

Agreed, and we are showing 4 choices here… Next

An iOS-style action sheet.

An action sheet can have a title, an additional message, and a list of actions.

ActionSheet in Flutter

ActionSheet in Flutter

The title is displayed above the message and the actions are displayed below this content.

Actions here are comprised under CupertinoActionSheetAction

Cupertino ActionSheet action

Cupertino ActionSheet action

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

All clear ?

The above portion describes the ActionSheet Options, but what about the cancel button????

Answer :

To include a iOS-style cancel button separate from the other buttons, provide a CupertinoActionSheetActionfor the cancelButton.

Cancel button

Cancel button

Last dagger…

An action sheet is typically passed as the child widget to showCupertinoModalPopup, which displays the action sheet by sliding it up from the bottom of the screen.

ActionSheet Modal Popup

ActionSheet Modal Popup

As the user selects, whether he/she liked my work, not, maybe or decide later :p,

the option selected is shown via the Snackbar.

So, choose frankly and wisely 🙂

If you all like my work, then please subscribe / comment / like my YouTube Channel, to convey the same 🙂

Video demonstration :

For complete source code, please visit below:

https://github.com/AseemWangoo/flutter_programs/blob/master/CupertinoActionSheet.dart

Leave a Reply