Floating action button

The circular one, and the extended one.

LiquidGlassFab is a circular glass button meant to float over your content. Drop it anywhere in a layout, or hand it to LiquidGlassScaffold's floatingActionButton slot and let the scaffold place it and keep it clear of the bottom bar.

Dart

LiquidGlassFab(
  icon: Icons.add_rounded,
  onPressed: () => compose(),
)

LiquidGlassFab.extended(
  icon: Icons.edit_rounded,
  label: const Text('Compose'),
  onPressed: () => compose(),
)

Parameter	Default	What it does
`icon`	`null`	The glyph. Both constructors take one.
`label`	`null`	`.extended` only — the text beside the icon.
`child`	`null`	Custom content inside the circular FAB, replacing `icon`.
`size`	`56`	Diameter of the circular FAB.
`width`	`null`	`.extended` only — an explicit width instead of hugging.
`visibility`	`true`	Toggling it animates the glass in and out.
`heroTag` / `tooltip`	`null`	The usual two, forwarded as you would expect.
`style`, `foregroundColor`, `iconSize`, `padding`	`null`, `null`, `24`/`20`, —	The look, same vocabulary as every other component.

Comments

Comments are GitHub Discussions — reply from either place.