Flutter – Make AlertDialog Disappear Automatically After Few Seconds
In Flutter, we can auto-close an AlertDialog by using the Future.delayed method to schedule a delay and then automatically close the AlertDialog. In this article, we are going to implement an AlertDialog and implement the Future.delayed method for auto closing the AlertDialog. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() { runApp(MyApp()); } |
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.green, // Set the app's primary theme color ), debugShowCheckedModeBanner: false , home: MyHomePage(), ); } } |
Step 5: Create MyHomePage Class
In this class we are going to use the Future.delay method to close the Alert Dialog after 3 seconds,In this class we create a function called showAutoDismissAlert that displays an AlertDialog. Inside this function, we use Future.delayed to automatically dismiss the dialog after a 3 second delay. when the Show Auto Dismiss Alert Button is clicked the Alert Dialog is appeared then after 3 seconds the Alert Dialog will dismissed.Comments are added for better understanding.
// Function to show an auto-dismissing alert dialog
void showAutoDismissAlert(BuildContext context) {
showDialog(
context: context,
builder: (context) {
// Schedule a delayed dismissal of the alert dialog after 3 seconds
Future.delayed(Duration(seconds: 3), () {
Navigator.of(context).pop(); // Close the dialog
});
// Return the AlertDialog widget
return AlertDialog(
title: Text("Auto Dismiss Alert Dialog"),
content: Text("This alert will dismiss automatically in 3 seconds."),
);
},
);
}
Dart
class MyHomePage extends StatelessWidget { // Function to show an auto-dismissing alert dialog void showAutoDismissAlert(BuildContext context) { showDialog( context: context, builder: (context) { // Schedule a delayed dismissal of the alert dialog after 3 seconds Future.delayed(Duration(seconds: 3), () { Navigator.of(context).pop(); // Close the dialog }); // Return the AlertDialog widget return AlertDialog( title: Text( "Auto Dismiss Alert Dialog" ), content: Text( "This alert will dismiss automatically in 3 seconds." ), ); }, ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Auto Dismiss Alert Example' ), ), body: Center( child: ElevatedButton( onPressed: () => showAutoDismissAlert(context), child: Text( 'Show Auto Dismiss Alert' ), ), ), ); } } |
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart' ; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.green, // Set the app's primary theme color ), debugShowCheckedModeBanner: false , home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { // Function to show an auto-dismissing alert dialog void showAutoDismissAlert(BuildContext context) { showDialog( context: context, builder: (context) { // Schedule a delayed dismissal of the alert dialog after 3 seconds Future.delayed(Duration(seconds: 3), () { Navigator.of(context).pop(); // Close the dialog }); // Return the AlertDialog widget return AlertDialog( title: Text( "Auto Dismiss Alert Dialog" ), content: Text( "This alert will dismiss automatically in 3 seconds." ), ); }, ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Auto Dismiss Alert Example' ), ), body: Center( child: ElevatedButton( onPressed: () => showAutoDismissAlert(context), child: Text( 'Show Auto Dismiss Alert' ), ), ), ); } } |