Dialog

Dialog Widget is used to display a popup on the screen.
This is useful for displaying important messages such as alerts and confirmation messages.

Basic Usage

showDialog
Dialog

In Flutter, you can call the Dialog using the showDialog function.
If you want to close the Dialog, you can use Navigator.pop(context) to do so.

onPressed: () => showDialog(
  context: context,
  builder: (BuildContext context) => Dialog(
    child: ...
  )
),

FullScreen

Dialog.fullscreen

To display a full-screen dialog, you can use Dialog.fullscreen.
Note that a "close button" is required to display the dialog in fullscreen mode.

onPressed: () => showDialog(
  context: context,
  builder: (BuildContext context) => Dialog.fullscreen(
    child: ...
  )
)

AlertDialog

AlertDialog

AlertDialog is used to alert or confirm users.
It is not highly customizable, but it is simple and easy to use, and is useful in situations where user confirmation is required.

onPressed: () => showDialog(
  context: context,
  builder: (BuildContext context) => AlertDialog(
    title: const Text("Notifications"),
    content: const Text("Do you allow notifications?"),
    actions: <Widget>[
      TextButton(
        onPressed: () => Navigator.pop(context, 'Cancel'),
        child: const Text('Cancel'),
      ),
      TextButton(
        child: const Text('Approve'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
  )
),

Animation

showGeneralDialog

showGeneralDialog is used to implement advanced dialogs or to create dialogs with a specific design.
transitionBuilder is a function that controls the animation of a dialog when it is shown and hidden, and can implement various animations such as scaling and fading.

onPressed: () => showGeneralDialog(
  context: context,
  pageBuilder: (c, a1, a2) => Container(),
  transitionBuilder: (ctx, a1, a2, child) {
    return Transform.scale(
        scale: Curves.easeInOut.transform(a1.value), // this is animation code
        child: Dialog(child: ...)
    );
  },
),

API

For further information, please refer to the official documentation below.