Create Simple AlertDialog Box in Flutter Android iOS Example Tutorial

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.

2. Create void main runApp() method and call our main MyApp class using it.

3. Create our main MyApp class extends with State less widget. In this class we would call the Alert class in Widget build area.

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.

5. Create our main Alert Dialog class named as AlertState extends with 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.

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.

8. Complete source code for main.dart file:

Screenshots:

Create Simple AlertDialog Box in Flutter Android iOS Example Tutorial

Leave a Reply

Your email address will not be published.