By default alert dialog message box has single OK button but sometimes app developer wants to add multiple buttons in Alert Dialog box. In Flutter we can add button in Alert dialog box using FlatButton widget. Alert dialog box with multiple choices is used to give multiple handling technique to the app user like user can press the OK button or press the No button and also press the Cancel button to give his opinion. So in this tutorial we would Flutter Create Alert Dialog with Yes No Cancel Buttons Android iOS Example Tutorial.
Contents in this project Flutter Create Alert Dialog with Yes No Cancel Buttons Android iOS Example Tutorial:
1. Import material.dart package in your project’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main Root MyApp class here. This method is our default method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root class named as MyApp. In this class we would call AlertWithButtons extends StatefulWidget class. We have to use the Stateful class structure in order to show the Alert dialog because alert dialog box usages Application build context.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: AlertWithButtons() ) ) ); } } |
4. Create a class named as AlertWithButtons extends StatefulWidget. In this class we would call our child view class named as AlertWithButtonsWidget using createState() method. The createState() would enable the mutable state management in flutter application.
|
1 2 3 4 5 |
class AlertWithButtons extends StatefulWidget { AlertWithButtonsWidget createState() => AlertWithButtonsWidget(); } |
5. Crete a class named as AlertWithButtonsWidget extends State. This class would be our main Child view class in which we would make the Alert dialog box.
|
1 2 3 4 |
class AlertWithButtonsWidget extends State { } |
6. Create a function named as showAlert() with Application build context and inside our declared function we would make flutter’s inbuilt showDialog() method to display the Alert dialog.
- title : Is used to display the Title of Alert dialog box title text.
- content : Is used to display Alert dialog context text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
showAlert(BuildContext context) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Text('Alert Dialog Title Text.'), content: Text("Are You Sure Want To Proceed ?"), actions: <Widget>[ FlatButton( child: Text("YES"), onPressed: () { //Put your code here which you want to execute on Yes button click. Navigator.of(context).pop(); }, ), FlatButton( child: Text("NO"), onPressed: () { //Put your code here which you want to execute on No button click. Navigator.of(context).pop(); }, ), FlatButton( child: Text("CANCEL"), onPressed: () { //Put your code here which you want to execute on Cancel button click. Navigator.of(context).pop(); }, ), ], ); }, ); } |
7. Create a Raised Button widget in Widget build area. We would call the showAlert() method on button press event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: RaisedButton( onPressed: () => showAlert(context), child: Text('Click Here To Show Alert Dialog Box'), textColor: Colors.white, color: Colors.purple, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ), ), ); } |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: AlertWithButtons() ) ) ); } } class AlertWithButtons extends StatefulWidget { AlertWithButtonsWidget createState() => AlertWithButtonsWidget(); } class AlertWithButtonsWidget extends State { showAlert(BuildContext context) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Text('Alert Dialog Title Text.'), content: Text("Are You Sure Want To Proceed ?"), actions: <Widget>[ FlatButton( child: Text("YES"), onPressed: () { //Put your code here which you want to execute on Yes button click. Navigator.of(context).pop(); }, ), FlatButton( child: Text("NO"), onPressed: () { //Put your code here which you want to execute on No button click. Navigator.of(context).pop(); }, ), FlatButton( child: Text("CANCEL"), onPressed: () { //Put your code here which you want to execute on Cancel button click. Navigator.of(context).pop(); }, ), ], ); }, ); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: RaisedButton( onPressed: () => showAlert(context), child: Text('Click Here To Show Alert Dialog Box'), textColor: Colors.white, color: Colors.purple, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ), ), ); } } |
Screenshots:
