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

Output: