Open In App

Alert Dialog box in Flutter

Improve
Improve
Like Article
Like
Save
Share
Report

Alert Dialog box informs the user about the situation that requires acknowledgment. Alert Box is a prompt that takes user confirmation. The very basic use of the alert box is used when we close the app, usually, we are notified with a prompt whether we want to exit or not. That’s an alert box.

The below-added code shows how to perform alert Dialog box in a flutter. I have used a button (Raised Button in flutter ) to trigger the alert dialog box. In its on the pressed property, we have to use the showDialog widget of flutter. It takes context and a builder. In builder, we provide the AlertDialog widget with title, content(Description of a title), and actions (Yes or no buttons), and our alert dialog box is ready to use.

Key Properties of Alter Dialog Box:

  • actions: The set of actions that are displayed at the bottom of the dialog
  • title: The title of the dialog is displayed in a large font at the top of the dialog.
  • content: This gives a message/ description about the title which you have provided to the Alert Dialog box.
  • backgroundColor: It provides the background color to the widget which is being used in.
  • elevation: Elevation provided height to the widget, It gives a default shadow to the widget.

Flutter provides its own show Dialog widget which is used to show Dialog box.

Example:

Dart




import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
      ),
      // ignore: avoid_unnecessary_containers
      body: Container(
        child: Center(
          child: ElevatedButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (ctx) => AlertDialog(
                  title: const Text("Alert Dialog Box"),
                  content: const Text("You have raised a Alert Dialog Box"),
                  actions: <Widget>[
                    TextButton(
                      onPressed: () {
                        Navigator.of(ctx).pop();
                      },
                      child: Container(
                        color: Colors.green,
                        padding: const EdgeInsets.all(14),
                        child: const Text("okay"),
                      ),
                    ),
                  ],
                ),
              );
            },
            child: const Text("Show alert Dialog box"),
          ),
 
// RaidedButton is deprecated and should not be used
// Instead use ElevatedButton
 
          // child: RaisedButton(
          //   onPressed: () {
          //     showDialog(
          //       context: context,
          //       builder: (ctx) => AlertDialog(
          //         title: const Text("Alert Dialog Box"),
          //         content: const Text("You have raised a Alert Dialog Box"),
          //         actions: <Widget>[
 
            // FlatButton is deprecated and should not be used
            // Instead use TextButton
             
          //           FlatButton(
          //             onPressed: () {
          //               Navigator.of(ctx).pop();
          //             },
          //             child: const Text("okay"),
          //           ),
          //         ],
          //       ),
          //     );
          //   },
          //   child: const Text("Show alert Dialog box"),
          // ),
        ),
      ),
    );
  }
}


Output:



Last Updated : 22 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads