GiffyBottomSheet class

A giffy bottom sheet based on Material Design modal bottom sheet.

A giffy bottom sheet is an alternative to a menu or a dialog and informs the user about situations that require acknowledgment.

An giffy bottom sheet 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.

If the content is too large to fit on the screen vertically, the dialog will display the title and the actions and let the content overflow, which is rarely desired. Consider using a scrolling widget for content, such as SingleChildScrollView, to avoid overflow. (However, be aware that since GiffyDialog tries to size itself using the intrinsic dimensions of its children, widgets such as ListView, GridView, and CustomScrollView, which use lazy viewports, will not work.)

Typically passed as the child widget to showModalBottomSheet, which displays the bottom sheet.

{@tool snippet}

This snippet shows a method in a State which, when called, displays a giffy bottom sheet and returns a Future that completes when the sheet is dismissed.

Future<void> _showMyDialog() async {
  return showModalBottomSheet<void>(
    context: context,
    isScrollControlled: true,
    barrierDismissible: false, // user must tap button!
    builder: (BuildContext context) {
      return GiffyBottomSheet(
        giffy: Image.asset('assets/giffy_sheet.gif'),
        title: const Text('GiffyBottomSheet Title'),
        content: SingleChildScrollView(
          child: ListBody(
            children: const <Widget>[
              Text('This is a demo giffy bottom sheet.'),
              Text('Would you like to approve of this message?'),
            ],
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('Approve'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

{@end-tool}

See also:

• showModalBottomSheet, which can be used to display a modal bottom sheet.
• BottomSheetThemeData, which can be used to customize the default bottom sheet property values.
• material.io/design/components/sheets-bottom.html