Sheets

The glass surface you pull up.

showLiquidGlassSheet is Flutter's own showModalBottomSheet with the glass put where its filled Material used to be. The route, the slide-up, the drag, the barrier and the dismissal are all Flutter's, unchanged, and every parameter of theirs is forwarded — what the sheet looks like is this package's, through the same LiquidGlassStyle every other component takes.

Dart

final choice = await showLiquidGlassSheet<String>(
  context: context,
  header: const Padding(
    padding: EdgeInsets.fromLTRB(20, 2, 20, 12),
    child: Text('Share',
        style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700)),
  ),
  builder: (context) => Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      for (final action in actions) _tile(action),
    ],
  ),
);

Name no height and the sheet hugs what is in it — the shape of an action sheet. These are the parameters that are the glass's own; everything else (isScrollControlled, constraints, transitionAnimationController, …) is showModalBottomSheet's, passed straight through:

Parameter	Default	What it does
`builder`	—	The sheet's content.
`style`	`null`	The glass. Unset, the sheet wears the shared default surface.
`anchor`	`floating`	`floating` is an inset card, rounded on all four corners. `attached` is full width on the bottom edge, only its top corners in frame.
`header`	`null`	A full-width slot above the padded content — the title row. It brings its own padding.
`grabber` / `grabberColor`	`true` / `null`	The drag handle centred at the top.
`margin` / `padding`	derived / `20,4,20,20`	The inset around a floating sheet, and around the content.
`foregroundColor`	`null`	A default colour for the text and icons on the glass.
`avoidKeyboard`	`true`	Lifts the sheet over the keyboard — the padding you would otherwise write in every builder. Needs `isScrollControlled: true` to have room to work.
`touch`	`null`	The same `LiquidGlassTouch` a lens takes, if the surface should answer a press.
`batch`	`false`	Impeller only. `true` puts the sheet on the chrome batch of the `LiquidGlassScaffold` it is opened from — the read its tab bar takes — instead of a read of its own. Off, the sheet reads the backdrop for itself.

The route is one way to present a LiquidGlassSheet, not the only one. The widget draws the surface and nothing else — the glass, the grabber, the header, the padded child — and where it sits belongs to whatever presents it. Pin one to the bottom of a page with an Align; or, for a sheet that resizes as you drag it, put a DraggableScrollableSheet in a showModalBottomSheet and place the bare sheet inside its builder — the glass has to be within what resizes, and the presenter wraps your content from outside it.

Dart

showModalBottomSheet(
  context: context,
  backgroundColor: Colors.transparent,
  isScrollControlled: true,
  builder: (context) => DraggableScrollableSheet(
    expand: false,
    initialChildSize: 0.5,
    snap: true,
    snapSizes: const [0.5, 0.94],
    builder: (context, scrollController) => LiquidGlassSheet(
      header: const _SheetTitle('Nearby'),
      child: ListView(
        controller: scrollController,
        children: [...],
      ),
    ),
  ),
);

Comments

Comments are GitHub Discussions — reply from either place.

Sheets

The panel is a plain widget#

Comments