How to Use Dialogs In Flutter

Today we’re going to discuss dialog. It is a small window-sized graphical control element that delivers information to the user and requests a response from them. In addition, dialog boxes are characterized as “modal” or “modeless” based on whether or not they prevent interaction with the software that triggered the dialog. I should also inform you that the sort of dialog box that appears is determined by the desired user engagement. Dialogs in flutter, on the other hand, are similar in that they tell users about a task and can contain crucial information, require decisions, or entail numerous tasks.

Fundamentals of Dialogs In Flutter

In contrast, When a dialog appears, it disables all app functionality and remains on screen until confirmed, dismissed, or a needed action is taken. They should be used for errors that block an app’s normal operation and for critical information that requires a specific task, decision, or acknowledgement.

Types Of Dialogs In Flutter

Dialogs in Flutter are classified into four types: alert dialogs, full-screen dialogs, confirmation dialogs, and finally, simple dialogs.

Alert Dialog

Alert dialogs interrupt users to provide important information, details, or tasks.

Simple Dialog

Simple dialogs offer a list of things that, when selected, have instant effect.

Confirmation Dialog

Confirmation dialogs demand users to confirm their selection before dismissing the dialog.

Full-screen Dialogs

Full-screen dialogs take up the entire screen and feature actions that must be completed in a sequence of steps.

Implementation Codes

Before we get started with codes, I have to remind you that containers, titles, supporting text, buttons, and, finally, scrims are all the dialog elements.

Alert Dialog

AlertDialog(
  title: Text('Reset settings?'),
  content: Text('This will reset your device to its default factory settings.'),
  actions: [
    FlatButton(
      textColor: Color(0xFF6200EE),
      onPressed: () {},
      child: Text('CANCEL'),
    ),
    FlatButton(
      textColor: Color(0xFF6200EE),
      onPressed: () {},
      child: Text('ACCEPT'),
    ),
  ],
)

Simple Dialog

SimpleDialog(
  title: Text('Set backup account'),
  children: [
    SimpleDialogItem(
      icon: Icons.account_circle,
      color: Colors.orange,
      text: '[email protected]',
      onPressed: () {
        Navigator.pop(context, '[email protected]');
      },
    ),
    SimpleDialogItem(
      icon: Icons.account_circle,
      color: Colors.green,
      text: '[email protected]',
      onPressed: () {
        Navigator.pop(context, '[email protected]');
      },
    ),
    SimpleDialogItem(
      icon: Icons.add_circle,
      color: Colors.grey,
      text: 'Add account',
      onPressed: () {
        Navigator.pop(context, '[email protected]');
      },
    ),
  ],
)

class SimpleDialogItem extends StatelessWidget {
  const SimpleDialogItem({Key key, this.icon, this.color, this.text, this.onPressed})
      : super(key: key);

  final IconData icon;
  final Color color;
  final String text;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return SimpleDialogOption(
      onPressed: onPressed,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(icon, size: 36.0, color: color),
          Padding(
            padding: const EdgeInsetsDirectional.only(start: 16.0),
            child: Text(text),
          ),
        ],
      ),
    );
  }
}

Confirmation Dialog

There is no explicit confirmation dialog in Flutter but this can be built using the Dialog widget as a blank slate and providing your own custom child.

Full-screen Dialog

To use a full-screen dialog, simply set the fullscreenDialog to true when pushing a new MaterialPageRoute.

Conclusion

So that’s it. To sum up, Commonly used in apps today use dialogs, which we finally covered today.

Before you go, I should also inform you that dialogs can be themed. You can check out the official documentation here, furthermore, you can check my flutter blogs here. Thank you for reading; I hope you found it useful; please share it with your family and friends if you did.