Playground · Navigation

Floating Glass Toolbar

  • shader component
  • iOS
  • Android
  • Flutter 3.47.0+

An iOS 26-style floating capsule of liquid glass holding a few icon actions and an overflow button that springs the glass open into a menu of more.

Version 1.1.0 · What changed
  • 1.1.0 2026-10-06 New actionLabels, moreActionsLabel and closeMenuLabel arguments translate what screen readers announce for the actions and the overflow button. Every action, the overflow button and the menu items can now be reached with a keyboard (Tab), are outlined while focused and press with Enter or Space; each button takes taps 48 points square (drawn and laid out as before), and menu labels follow text sizes up to 200%.
  • 1.0.1 2026-10-03 In debug builds, a badge now names the shader when it fails to load and how to fix it.
  • 1.0.0 2026-10-03 First release.

Parameters

How many icon actions show before the overflow button.

How many labelled actions the overflow menu lists.

Whether the overflow menu starts open. Changing it later morphs the toolbar open or closed.

The colour of the icons and the menu's labels.

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.

How much shadow the toolbar casts on what's below 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 Floating Glass Toolbar Component to this Flutter app. Call get_export with componentId "floating-glass-toolbar" and parameters {"actionCount":4,"icon1":"share","icon2":"heart","icon3":"bookmark","icon4":"edit","menuCount":3,"menuLabel1":"Copy link","menuLabel2":"Duplicate","menuLabel3":"Add to album","menuLabel4":"Hide","open":false,"iconColor":"FFFFFF","blur":4,"refraction":0.7,"tint":"FFFFFF","tintStrength":0.08,"rim":0.7,"shadow":0.4}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/floating-glass-toolbar?actionCount=4&icon1=share&icon2=heart&icon3=bookmark&icon4=edit&menuCount=3&menuLabel1=Copy+link&menuLabel2=Duplicate&menuLabel3=Add+to+album&menuLabel4=Hide&open=false&iconColor=FFFFFF&blur=4&refraction=0.7&tint=FFFFFF&tintStrength=0.08&rim=0.7&shadow=0.4)