Alert Dialog In Flutter With Complete Example

Flutter / By Rakesh Saini / January 22, 2022

In this example we will learn how to use ShowDialog In Flutter to show an Alert Box.

Why We Use ShowDialog/ Alert Box In Flutter?

Generally to show some information on the button click on warning or successful message, the ShowDialog is used. But Please note that the ShowDialog is now deprecated. We will use Alert Box to show the alert message.

The below code shows how to show Alert dialog box in flutter. It generally takes user permission and process further.

Key Properties Of Alert Dialog

action: the set of action that displays bottom of the box.
title: The text which shows top in the dialog box.
content: This is used to give the message to the user according to the title.
elevation: It gives default show to the box.
background color: Used to set background color.


import 'package:flutter/material.dart';

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

  @override
  _TestClassState createState() => _TestClassState();
}

class _TestClassState extends State<TestClass> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Alert Dialog Demo"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.only(top: 30),
              child: Center(
                child: RaisedButton(
                  onPressed: () {
                    return showDialog(
                      context: context,
                      builder: (ctx) => AlertDialog(
                        title: Text("Show Alert Dialog Box"),
                        content: Text("You have raised a Alert Dialog Box"),
                        actions: <Widget>[
                          FlatButton(
                            onPressed: () {
                              Navigator.of(ctx).pop();
                            },
                            child: Text("Ok"),
                          ),
                        ],
                      ),
                    );
                  },
                  child: Text("Show alert Dialog box"),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}