Flutter CupertinoActionSheet
Flutter CupertinoActionSheet widget displays an alert that presents the user with two or more actionable items, in a Cupertino Modal Popup.
Syntax
Cupertino style Action Sheet with title, message, and actions.
CupertinoActionSheet(
title: const Text('My Title'),
message: const Text('My Message'),
actions: <CupertinoActionSheetAction>[
CupertinoActionSheetAction(
child: const Text('Action One'),
onPressed: () {
Navigator.pop(context);
},
),
CupertinoActionSheetAction(
child: const Text('Action Two'),
onPressed: () {
Navigator.pop(context);
},
)
],
),
Example
Flutter Application with a CupertinoActionSheet widget.
CupertinoActionSheet widget contains title, message, and actions. Two actions are present inside actions array.
main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Application';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
/// stateful widget that the main application instantiates
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// private State class that goes with MyStatefulWidget
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: Center(
child: CupertinoButton(
onPressed: () {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) => CupertinoActionSheet(
title: const Text('My Title'),
message: const Text('My Message'),
actions: <CupertinoActionSheetAction>[
CupertinoActionSheetAction(
child: const Text('Action One'),
onPressed: () {
Navigator.pop(context);
},
),
CupertinoActionSheetAction(
child: const Text('Action Two'),
onPressed: () {
Navigator.pop(context);
},
)
],
),
);
},
child: const Text('Show Action Sheet'),
),
),
);
}
}
Screenshots
![](https://googleflutter.com/wp-content/uploads/2021/11/flutter-cupertino-action-sheet-example-1.png)
Click on Show Action Sheet
button.
![](https://googleflutter.com/wp-content/uploads/2021/11/flutter-cupertino-action-sheet-example-2.png)