Flutter Cupertino Action Sheet Example
In this article, we are going to integrate flutter cupertino action sheet in mobile app for android and iOS platforms. We already implemented two types of bottom sheet in flutter app: Modal Bottom Sheet & Persistent Bottom Sheet.
Cupertino is group of widget to implement iOS style UI in flutter applications. To integrate android style UI, we use material widget instead of cupertino widget. Using cupertino action sheet, we can display two or more options to users with title and message. So user can select one option from it according to his/her choice.
CupertinoActionSheet widget has many properties. Using title property, we can display title with customization in cupertino sheet. We can also display message text below title using message property. actions property is used to display multiple options in cupertino action sheet. So user can select any one option and we can navigate user to new screen or we can also do any other thing.
We can also control scrolling of actions in cupertino sheet using actionScrollController widget. We can also display cancel button below cupertino sheet actions. So user can also close the cupertino action sheet by tapping on it if we call pop method of navigator in onPressed callback of cancel button.
Flutter Cupertino Bottom Sheet
@override
_MyCupertinoSheetSampleState createState() => _MyCupertinoSheetSampleState();
}
class _MyCupertinoSheetSampleState extends State<MyCupertinoSheetSample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Cupertino Sheet Sample’)),
body: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 25, vertical: 15),
primary: Colors.orangeAccent
),
onPressed: () {
final action = CupertinoActionSheet(
title: Text(
“Soccer”,
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
message: Text(
“Choose your favourite player”,
style: TextStyle(fontSize: 18),
),
actions: <Widget>[
CupertinoActionSheetAction(
child: Text(“Cristiano Ronaldo”),
isDefaultAction: true,
onPressed: () {
},
),
CupertinoActionSheetAction(
child: Text(“Lionel Messi”),
isDestructiveAction: true,
onPressed: () {
},
)
],
cancelButton: CupertinoActionSheetAction(
child: Text(“Cancel”),
onPressed: () {
Navigator.pop(context);
},
),
);
showCupertinoModalPopup(context: context, builder: (context) => action);
},
child: Text(“Open Bottom Sheet”, style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
),
),
);
}
}
Pingback: Sliding Sheet Flutter Example - CodingWithDhrumil