Create Alert Dialog in Flutter

An Alert Dialog typically consists of a title, a message, and one or more buttons that allow the user to respond to the alert. The title and message can be customized to provide specific information to the user, while the buttons provide options for the user to respond to the alert.

Create Alert Dialog in Flutter

In Flutter, Alert Dialogs are created using the AlertDialog widget, which provides a customizable dialog box that can be displayed on top of the current screen. The AlertDialog widget provides several properties that allow developers to customize the appearance and behavior of the dialog box, such as title, content, actions, and more.

When an Alert Dialog is displayed, the user must acknowledge the alert by responding to one of the available options, typically by clicking one of the buttons provided. Once the user has responded to the alert, the dialog box is dismissed, and the app can proceed with other actions.

Here is an example of Alert Dialogue in Flutter:

showAlertDialogue() {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
          actionsAlignment: MainAxisAlignment.center,
          alignment: Alignment.topRight,
          // buttonPadding: EdgeInsets.all(0),
          title: const Text(
            'Alert Header',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
          ),
          content: SingleChildScrollView(
            child: Text('Text description of some topic.')
          ),
          actions: <Widget>[
            TextButton(
                child: const Text('Cancel'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
            ),
          ],
      );
    },
  );
}

In this example, the showDialog function takes a BuildContext as an argument, which is usually the BuildContext of the widget that triggers the dialog.

The builder property of the showDialog function is a callback that returns a widget, which in this case is an AlertDialog. The AlertDialog widget has a title property, which sets the title of the dialog, a content property, which sets the content of the dialog, and an actions property, which is a list of buttons that are displayed at the bottom of the dialog. In this example, there's only one button labeled 'OK', which pops the dialog when pressed.

To use this function, you can call it from a button or any other widget that triggers the dialog, like this:

ElevatedButton(
  onPressed: () {
    showAlertDialogue(context);
  },
  child: Text('Show Alert'),
),

In this example, a RaisedButton widget is used to trigger the dialog, and the _showAlertDialog function is called when the button is pressed. The context argument passed to the function is the BuildContext of the button widget.

Complete Code Example

Here is the complete code example of showing an alert-box in Flutter on a button click.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    showAlertDialogue() {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            actionsAlignment: MainAxisAlignment.center,
            alignment: Alignment.center,
            title: const Text(
              'Alert Header',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
            ),
            content: const SingleChildScrollView(
                child: Text('Text description of some topic.')
            ),
            actions: <Widget>[
              TextButton(
                child: const Text('Cancel'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Application"),
      ),
      body: Container(
        margin: const EdgeInsets.symmetric(
          vertical: 30.0,
          horizontal: 40.0,
        ),
        width: double.infinity,
        child: ElevatedButton(
          onPressed: () {
            showAlertDialogue();
          },
          child: const Text('Show Alert'),
        ),
      ),
    );
  }
}