Overlay

Sheet

A modal sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app.

It navigates to a new page each time.

A closely related widget is a persistent sheet, which shows information that supplements the primary content of the app without preventing the user from interacting with the app.

CLI

To generate a specific style for customization:

dart run forui style create modal-sheet

Usage

showFSheet(...)

1showFSheet(
2 context: context,
3 style: const .delta(flingVelocity: 700),
4 side: .btt,
5 builder: (context) =>
6 const Padding(padding: .all(16), child: Text('Sheet content')),
7)

FModalSheetRoute(...)

1FModalSheetRoute<void>(
2 style: const FModalSheetStyle(),
3 side: .btt,
4 builder: (context) =>
5 const Padding(padding: .all(16), child: Text('Sheet content')),
6)

Examples

Blurred Barrier

With DraggableScrollableSheet

On this page