Open In App

Flutter - Make AlertDialog Disappear Automatically After Few Seconds

Last Updated : 24 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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'),
        ),
      ),
    );
  }
}

Output:


Next Article
Flutter - Create Animation Using the AnimatedAlign Widget
author
chinmaya121221
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox