Playground · Overlays & sheets

Glass Bottom Sheet

  • shader component
  • iOS
  • Android
  • Flutter 3.47.0+

A sheet of liquid glass at the bottom of the screen that you drag by its handle between three detents, small, medium and large, and that can float inset from the edges like an iOS 26 sheet.

Version 1.2.0 · What changed
  • 1.2.0 2026-10-06 The handle's screen reader names are now arguments (expandLabel, collapseLabel, moveToLabel), so you can translate them. The handle takes keyboard focus with a visible ring, Enter or Space toggles the sheet and the up and down arrows step it through its detents.
  • 1.1.2 2026-10-03 In debug builds, a badge now names the shader when it fails to load and how to fix it.
  • 1.1.1 2026-10-03 A parent that mirrors onExpandedChanged into expanded, or onDetentChanged into detent, no longer pulls the sheet to another detent: dragging from large to medium, or from medium to small with expanded left true, now stays where the user let go.
  • 1.1.0 2026-10-03 Three detents like an iOS 26 sheet: small, a new medium (mediumFraction) and large. Drags snap to the nearest one and flings skip to the last. A new detent Parameter sets where the sheet rests and onDetentChanged reports moves; expanded keeps working. A new inset Parameter floats the sheet clear of the edges at small and medium, with all four corners rounded, widening to full width with square bottom corners as it rises to large.
  • 1.0.0 2026-10-02 First release.

Parameters

How tall the sheet is when collapsed, in logical pixels.

How tall the sheet is at its medium detent, as a fraction of the area it sits in. It stays between the collapsed and expanded heights.

How tall the sheet is when expanded, as a fraction of the area it sits in.

Where the sheet rests: collapsed, part way up or expanded. Medium or large takes precedence over Start expanded. Changing it later moves the sheet.

Whether the sheet starts expanded, at its large detent, while Detent is small. Changing it later moves the sheet.

How far the sheet floats from the sides and bottom at its small and medium detents, with all four corners rounded. It always spans the full width when expanded. 0 keeps it edge to edge.

Show a grab handle at the top. Without it the sheet still drags, and tapping its top edge still toggles it.

How much the glass frosts what's behind it.

How strongly the glass bends what's behind it near its edges, from flat to the most its rim can show.

How much of the tint colour shows in the glass.

How bright the lit edge of the glass is.

The radius of the sheet's top corners, and of its bottom corners while it floats.

How much shadow the sheet casts on what's around it.

Loading Preview…

Send to your coding agent

Add Sheen's MCP server once, then paste the prompt. No key or account needed.

Run in your project (Claude Code)
claude mcp add --transport http sheen https://sheen.ciroapps.com/api/mcp
Then ask your agent
Use the Sheen MCP server to add the Glass Bottom Sheet Component to this Flutter app. Call get_export with componentId "glass-bottom-sheet" and parameters {"collapsedHeight":120,"mediumFraction":0.5,"expandedFraction":0.85,"detent":"small","expanded":false,"inset":0,"handle":true,"blur":2,"refraction":0.7,"tint":"FFFFFF","tintStrength":0.06,"rim":0.7,"cornerRadius":28,"shadow":0.4}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/glass-bottom-sheet?collapsedHeight=120&mediumFraction=0.5&expandedFraction=0.85&detent=small&expanded=false&inset=0&handle=true&blur=2&refraction=0.7&tint=FFFFFF&tintStrength=0.06&rim=0.7&cornerRadius=28&shadow=0.4)