How to implement AlertDialog in Flutter

How to implement AlertDialog in Flutter

In Flutter, the AlertDialog is a widget, which informs the user about the situations that need acknowledgment. In this guide, we will discuss how to implement AlertDialog in Flutter. The Flutter alert dialog contains an optional title that is displayed above the content and a list of actions displayed below the content. An alert dialog is a useful feature that notifies the user with important information to make a decision or provides the ability to choose a specific action or list of actions. It is a pop-up box that appears at the top of the app content and in the middle of the screen. It can be dismissed manually by the user before resuming interaction with the app. An alert can be thought of as a floating modal that should be used for a quick response such as password verification, small app notifications, and many more. The alerts are very flexible and can be customized very easily.

Related guide: How To Implement BottomSheet In Flutter

Some of the Properties used in AlertDialog are given below.

actionsdisplayed below the content
titleThe title of the dialog is displayed in a large font at the top of the dialog.
Contentdefines the body of the AlertDialog widget. It gives a message about the title.
ContentPadding padding required for the content inside the AlertDialog widget.
Shape provides the shape to the alert dialog box, such as curve, circle, or any other different shape.
backgroundColorprovides the background color to the widget.
elevationprovided height to the widget, It gives a default shadow to the widget.

Let’s take an example of how we can implement the AlertDialog in our flutter application.

import 'package:flutter/material.dart';
import 'package:vlogpost/screen/succssfulpage.dart';

class AlertScreen extends StatefulWidget {
  const AlertScreen({Key? key}) : super(key: key);

  @override
  State<AlertScreen> createState() => _AlertScreenState();
}

class _AlertScreenState extends State<AlertScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Alert Dialog'),
        centerTitle: true,
        backgroundColor: Colors.teal,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () => showAlert(context),
              child: const Text('Show AlertDialog'),
            ),
          )
        ],
      ),
    );
  }

  Future<void> showAlert(BuildContext context) {
    return showDialog(
        context: context,
        barrierColor: Colors.grey.shade400.withOpacity(0.8),
        builder: (context) {
          return AlertDialog(
            clipBehavior: Clip.antiAlias,
            elevation: 0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15),
            ),
            title: const Center(
                child: Text(
              'Do you want to add more item ?',
              textAlign: TextAlign.center,
            )),
            content: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (_) => const SuccessfulPageScreen()));
                  },
                  child: const Text('OK'),
                ),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: const Text('Cancel'),
                ),
              ],
            ),
          );
        });
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

If we click the “Show AlertDialog” button, we will see the message at the center of the screen. which is shown below

On tapping with cancel it will pop up back to the original screen. Whereas when we tap on the ok button it will perform the function of the Ok Button.

Thank you for reading the Guide about How to implement the AlertDialog in Flutter.