Dialogs, Alerts, and Bottom Sheets in Flutter

In mobile app development, providing a user-friendly interface for interaction is crucial. In Flutter, Dialogs, Alerts, and Bottom Sheets help in creating an intuitive experience. This guide will walk you through using these elements effectively.

Dialogs in Flutter

Dialogs are pop-up windows that temporarily interrupt the current workflow to display information or ask for user input. In Flutter, there are several types of dialogs you can implement.

1. AlertDialog

The AlertDialog widget is commonly used for showing alerts or confirmations. It allows adding multiple actions, like “OK” and “Cancel.” Here’s a basic example:

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Alert'),
      content: Text('This is a simple alert dialog.'),
      actions: <Widget>[
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('OK'),
        ),
      ],
    );
  },
);

This code opens a simple alert dialog with a title, content, and an “OK” button that dismisses the dialog when tapped.

2. SimpleDialog

A SimpleDialog is suitable for displaying a list of options, such as a settings menu or selection picker.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      title: Text('Choose an option'),
      children: <Widget>[
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Option 1'),
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Option 2'),
        ),
      ],
    );
  },
);

Here, two options are displayed, and tapping one will close the dialog.

3. Custom Dialogs

For more control over the layout and content, you can create custom dialogs using the Dialog widget.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return Dialog(
      child: Container(
        height: 150,
        child: Column(
          children: <Widget>[
            Text('Custom Dialog'),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Close'),
            ),
          ],
        ),
      ),
    );
  },
);

This allows you to design the dialog’s appearance freely, making it suitable for cases where more complex layouts are needed.

Alerts in Flutter

Alerts notify users about important events. While AlertDialog is the most common alerting tool, Flutter also offers SnackBar, a more lightweight option.

1. SnackBar

A SnackBar displays a quick message at the bottom of the screen and automatically disappears after a short duration. You can also add actions to it, like undoing an action.

final snackBar = SnackBar(
  content: Text('Item added to cart!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // Code to undo the change
    },
  ),
);

ScaffoldMessenger.of(context).showSnackBar(snackBar);

In this case, the snack bar informs the user that an item has been added to their cart, with an option to undo it.

Bottom Sheets in Flutter

Bottom Sheets are useful for displaying additional content or quick actions. They appear at the bottom of the screen and come in two types: Modal Bottom Sheets and Persistent Bottom Sheets.

1. Modal Bottom Sheet

A Modal Bottom Sheet temporarily interrupts the current workflow, requiring the user to interact with it before proceeding.

void _showModalBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        child: Column(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.photo),
              title: Text('Photo'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.music_note),
              title: Text('Music'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      );
    },
  );
}

This modal displays a list of options for users to choose from. Once an option is selected, the modal closes.

2. Persistent Bottom Sheet

Unlike the modal bottom sheet, the Persistent Bottom Sheet stays on screen even when the user interacts with other parts of the app.

void _showPersistentBottomSheet(BuildContext context) {
  Scaffold.of(context).showBottomSheet<void>(
    (BuildContext context) {
      return Container(
        height: 150,
        color: Colors.blue,
        child: Center(
          child: Text('This is a persistent bottom sheet'),
        ),
      );
    },
  );
}

This type of bottom sheet can be useful for displaying important actions, such as toolbars, which need to remain visible even while the user is interacting with the main content.

Conclusion

Dialogs, alerts, and bottom sheets are essential for enhancing user interactions in mobile applications. Whether you need to notify users, prompt for input, or provide extra options, Flutter makes it easy to implement these features with built-in widgets. Mastering these components will significantly improve the usability and functionality of your Flutter apps.

Explore Other Flutter Topics…