How to create an Alert dialog in Flutter

How to create an Alert dialog in Flutter:

Alert dialogs are useful component in UI development. These are dialogs shown before donig any action and it is used to take user acknowledgement. Flutter provides AlertDialog class to create an alert dialog easily.

Flutter program to create a simple alert dialog:

Let’s take a look at the below program:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FAB Example'),
      ),
      body: Center(
          child: TextButton(
              onPressed: () {
                showAlert(context);
              },
              child: Text("Click Me"))),
    );
  }

  showAlert(BuildContext context) {
    Widget submitButton = TextButton(
        child: Text('submit'),
        onPressed: () {
          Navigator.of(context).pop();
        });
        
    AlertDialog dialog = AlertDialog(
        title: Text('Alert Title'),
        content: Text('Content of the alert'),
        actions: [submitButton]);

    showDialog(
        context: context,
        builder: (BuildContext context) {
          return dialog;
        });
  }
}

It will create a simple screen with one TextButton. On clicking this button, it will show one AlertDialog.

Here,

showAlert method is used to show the alert dialog
submitButton is a TextButton that we are adding to the alert dialog.
dialog is an AlertDialog with one title, description and one button.
showDialog method is used to show the AlertDialog.

AlertDialog with cancel and confirm action:

Sometimes, we need to read the confirm and cancel activity of a user on the alert dialog. For example, we might want to show a different message if user cancels a dialog. Let’s take a look at the below program:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FAB Example'),
      ),
      body: Center(
          child: TextButton(
              onPressed: () async {
                bool response = await showAlert(context);
                print("Response from the alert : $response");
              },
              child: Text("Click Me"))),
    );
  }

  Future<bool> showAlert(BuildContext context) async {
    Widget submitButton = TextButton(
        child: Text('submit'),
        onPressed: () {
          Navigator.of(context).pop(true);
        });

    Widget cancelButton = TextButton(
        child: Text('Cancel'),
        onPressed: () {
          Navigator.of(context).pop(false);
        });

    AlertDialog dialog = AlertDialog(
        title: Text('Alert Title'),
        content: Text('Content of the alert'),
        actions: [submitButton, cancelButton]);

    return showDialog<bool>(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return dialog;
        });
  }
}

Here,

we added two widgets submitButton and cancelButton to the AlertDialog.
showAlert is an async method that returns one Future object that holds a boolean value.
On click of the submit button, it fires true and for cancel button, it fires false.
Based on the result, we are printing the value on console.

CodeVsColor

How to create an Alert dialog in Flutter