Flutter Cupertino Alert Dialog Example

This article explains you how to display flutter cupertino alert dialog in mobile application for both android & iOS platforms. You can also check out flutter cupertino related articles.

Normally dialog is used to display information or asks user to confirm action in mobile applications. In this flutter example, we are creating iOS styled cupertino alert dialog for both android and iOS frameworks. We can add multiple options in cupertino alert dialog. Here we integrate only two options to confirm action to users.

We can display dialog using showDialog() method. We are integrating CupertinoAlertDialog widget in showDialog method. CupertinoAlertDialog has many attributes. title property is used to display title at top of the dialog. We can customize it according to our requirement.

content property is used to display information or description in center of cupertino dialog. actions property is used to display options at bottom of cupertino dialog. To display actions in cupertino alert dialog, we need to use CupertinoDialogAction widget. We can add text as child widget in this widget. To perform operations on click of option, we need to use onPressed method of CupertinoDialogAction widget.

 

Create Flutter Cupertino Alert Dialog

showCupertinoAlertDialog(BuildContext context){
showDialog(
builder: (context) => CupertinoAlertDialog(
title: Column(
children: <Widget>[
Text(“Cupertino Alert Dialog”),
Icon(
Icons.message,
color: Colors.deepOrangeAccent,
),
],
),
content: Text( “Are you sure want to delete this item?”),
actions: <Widget>[
CupertinoDialogAction(
child: Text(“NO”),
onPressed: () {
Navigator.of(context).pop();
},),
CupertinoDialogAction(
child: Text(“YES”),
onPressed: () {
Navigator.of(context).pop();
},),
],
), context: context);
}
 
 

Integrate Flutter Custom Dialog

class MyCupertinoDialogScreen extends StatefulWidget {
@override
_MyCupertinoDialogScreenState createState() => _MyCupertinoDialogScreenState();
}

class _MyCupertinoDialogScreenState extends State<MyCupertinoDialogScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Cupertino Alert Dialog’)),
body: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.orangeAccent,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15)
),
child: Text(‘Show Alert Dialog’, style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
onPressed: (){
showCupertinoAlertDialog(context);
},
),
)
);
}

 
 
flutter cupertino alert dialog
 

One thought on “Flutter Cupertino Alert Dialog Example

Leave a Reply