AlertDialog class

A Material Design alert dialog.

An alert dialog (also known as a basic dialog) informs the user about situations that require acknowledgment. An alert dialog has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed below the content.

For dialogs that offer the user a choice between several options, consider using a SimpleDialog.

Typically passed as the child widget to showDialog, which displays the dialog.

Future<void> _showMyDialog() async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false, // user must tap button!
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('AlertDialog Title'),
        content: const SingleChildScrollView(
          child: ListBody(
            children: <Widget>[
              Text('This is a demo alert dialog.'),
              Text('Would you like to approve of this message?'),
            ],
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('Approve'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Alert dialogs and scrolling

By default, alert dialogs size themselves to contain their children.

If the content is too large to fit on the screen vertically, the dialog will display the title and actions, and let the content overflow. This is rarely desired. Consider using a scrolling widget for content, such as SingleChildScrollView, to avoid overflow.

Because the dialog attempts to size itself to the contents, the content must support reporting its intrinsic dimensions. In particular, this means that lazily-rendered widgets such as ListView, GridView, and CustomScrollView, will not work in an AlertDialog unless they are wrapped in a widget that forces a particular size (e.g. a SizedBox).

For finer-grained control over the sizing of a dialog, consider using Dialog directly.

See also:

• SimpleDialog, which handles the scrolling of the contents but has no actions.
• Dialog, on which AlertDialog and SimpleDialog are based.
• CupertinoAlertDialog, an iOS-styled alert dialog.
• showDialog, which actually displays the dialog and returns its result.
• material-io.cn/design/components/dialogs.html#alert-dialog
• m3.material-io.cn/components/dialogs