Alert Dialog In Flutter With Example

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

Alert Dialog In Flutter
Alert Dialog In Flutter

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"),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Result

When you will click on the button, The Alert Dialog will appear.

ShowDialog Flutter
ShowDialog Flutter

Thank you for visiting the showdialog tutorial on fluttertpoint. Please learn more useful flutter tutorials from here.

close

Don’t miss new tips!

We don’t spam! Read our [link]privacy policy[/link] for more info.

Leave a Comment