Alert Dialog is one of the most important features we add to notify users about some important information. It makes the user acknowledge the situation or action he is going to take. Alert Dialog in Flutter is easy to implement.
The very primary use of Alert Dialog in an app is when the user wants to exit from the app, usually, we are notified with a confirmation box whether we want to leave the app or not.
Alert Dialog is a widget in Flutter that is used to show a pop-up box and asks users to take certain actions or not according to the requirement. Let’s check how we implement it in Flutter.
You may also check our Flutter app development services page.
Key Properties of Alter Dialog Box:
- actions: It shows the actions you need to perform at the bottom.
- title: It shows what this dialog is about. Ex: Delete Account.
- content: This gives a message/ description about the title that you have provided to the Alert Dialog box.
- elevation: Elevation provides height to the widget, It gives a default shadow to the widget.
Now, create a new project, and I have used the already created Floating Action Button to show Alert Dialog.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Future<void> showAlert() async { showDialog(context: context, builder: (BuildContext context){ return AlertDialog( title: const Text("Test"), content: const Text("This is a test dialog"), actions: [ ElevatedButton(onPressed: (){ Navigator.of(context).pop(); }, child: const Text("OK")) ], ); } ); } |
Flutter provides its own show Dialog widget which is used to show the Alert Dialog box.
Example:
|
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 80 81 |
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { Future<void> showAlert() async { showDialog(context: context, builder: (BuildContext context){ return AlertDialog( title: const Text("Test"), content: const Text("This is a test dialog"), actions: [ ElevatedButton(onPressed: (){ Navigator.of(context).pop(); }, child: const Text("OK")) ], ); } ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const <Widget>[ Text( 'Check alert dialog', ), // Text( // '$_counter', // style: Theme.of(context).textTheme.headline4, // ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: showAlert, tooltip: 'Increment', child: const Icon(Icons.add), ), ); } } |
Output:
This is how we implement Alert Dialog in Flutter.
Thanks for reading this article.
If I got something wrong, let me know in the comments. I would love to improve.
You can also read– https://mobikul.com/get-storage-in-flutter/
Reference link: https://api.flutter.dev/flutter/material/AlertDialog/AlertDialog.html