Material style alert dialog box is used to show a simple alert message on both android and iOS flutter mobile applications. The alert dialog contains a message as Title and a OK button. The basic requirement of Alert Dialog is when we want to suddenly display a response message coming from API or wants to alert the app using then we have to use Alert Dialog box. In flutter we would use inbuilt showAlert() function to display Alert Dialog box. The showAlert() method returns a AlertDialog widget with customization options like custom Title text and Buttons. So in this tutorial we would Create Simple AlertDialog Box in Flutter Android iOS Example Tutorial.
Contents in this project Create Simple AlertDialog Box in Flutter Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class using it.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. In this class we would call the Alert class in Widget build area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Simple Alert Dialog Box in Flutter') ), body: Center( child: Alert() ) ) ); } } |
4. Create a class named as Alert extends StatefulWidget. In this class we would make the AlertState class using createState() state method. This would enable the mutable state management in given class.
|
1 2 3 4 5 |
class Alert extends StatefulWidget { AlertState createState() => AlertState(); } |
5. Create our main Alert Dialog class named as AlertState extends with State.
|
1 2 3 4 |
class AlertState extends State { } |
6. Create a function named as showAlert(). Inside the function we would call Flutter’s inbuilt method showDialog() with Alert dialog return. In the alert dialog box we would simply showing a Title text and a Button using Flat Button. We would call the Navigator.of(context).pop() method to hide the Alert dialog.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
showAlert(BuildContext context) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text('Alert Message Title Text.'), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } |
7. Creating a Raised button widget in widget build area. We would call the alert message with button onPress event. We would have to pass the Widget build context with function as argument.
|
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.green, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ), ); } |
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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Simple Alert Dialog Box in Flutter') ), body: Center( child: Alert() ) ) ); } } class Alert extends StatefulWidget { AlertState createState() => AlertState(); } class AlertState extends State { showAlert(BuildContext context) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text('Alert Message Title Text.'), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { 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.green, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ), ); } } |
Screenshots:
