CupertinoActionSheet In Flutter

All mobile applications delivering some common characteristic. One quite obvious behavior is to provide users to make decisions or choose options, while needed. To achieve this we’ve some pre-built functionality.

Hello Guys, In this tutorial, we’ll learn about how to implement CupertinoActionSheet in Flutter.

Table of Contents :

Introduction

Setup

Code Implementation

Code File

Conclusion

Introduction:

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Using Flutter we can build

If you want to explore more about Flutter, please visit Flutter’s official website to get more information.

CupertinoActionSheet

According to 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. To build an ios-style app to present the list option we’ll use CupertinoActionSheet.

Setup:

First of all, we have to import the Cupertino package into our dart file.

import 'package:flutter/cupertino.dart;

CupertinoActionSheet is an ios-themed widget that has action sheets design specifications. An action sheet can have a title, an additional message, and a list of actions. To display action buttons that look like standard iOS action sheet buttons, provide CupertinoActionSheetActions for the actions given to this action sheet.

To include an iOS-style cancel button separate from the other buttons, provide a CupertinoActionSheetAction for the cancelButton given to this action sheet. 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.

Constructors:

CupertinoActionSheet({Key? key,
Widget? title,
Widget? message,
List<Widget>? actions,
ScrollController? messageScrollController,
ScrollController? actionScrollController,
Widget? cancelButton})

Properties:

1. actions-> List<Widgets>: The set of actions that are displayed for the user to select.
2. actionScrollController → ScrollController: A scroll controller that can be used to control the scrolling of the actions in the action sheet
3. cancelButton → Widget: The optional cancel button that is grouped separately from the other actions
4. message → Widget: An optional descriptive message that provides more details about the reason for the alert.
5. title → Widget: An optional title of the action sheet. When the message is non-null, the font of the title is bold.

Code implementation:

In this snippet on click of a button, we’ve added CupertinoActionSheet. We can use it anywhere in the class.

showCupertinoModalPop

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

Now added title, message, actions, and cancelButton. These are the properties.

To show particular option item in action we used CupertinoActionSheetAction() widget.

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

Code file

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

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("CupertinoActionSheet"),
),
body: Center(
child: ElevatedButton(
onPressed: () {
final action = CupertinoActionSheet(
title: Text(
"Flutter dev",
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 "),
),
),
);
}
}

Output

Conclusion:

In this article, I have explained the CupertinoActionSheet widget demo, which you can modify and experiment with according to your own. This little introduction was about showing an ios-styled theme in the app.

I hope this blog will provide you with sufficient information in trying up CupertinoActionSheet Widgets in your Flutter projects. So please try it.

❤ ❤ 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.