Open In App

Alert Dialog box in Flutter

Last Updated : 22 Jun, 2022
Like Article

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.



import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  // ignore: library_private_types_in_public_api
  _HomePageState createState() => _HomePageState();
class _HomePageState extends State<HomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksForGeeks"),
      // ignore: avoid_unnecessary_containers
      body: Container(
        child: Center(
          child: ElevatedButton(
            onPressed: () {
                context: context,
                builder: (ctx) => AlertDialog(
                  title: const Text("Alert Dialog Box"),
                  content: const Text("You have raised a Alert Dialog Box"),
                  actions: <Widget>[
                      onPressed: () {
                      child: Container(
                        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"),
          // ),


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads