Playground · Navigation

Glass Tab Bar

  • shader component
  • iOS
  • Android
  • Flutter 3.47.0+

An iOS 26-style floating tab bar on a pill of glass that bends what scrolls behind it, with the selection springing from tab to tab.

Version 1.2.0 · What changed
  • 1.2.0 2026-10-06 The minimized pill's screen reader names are now arguments (expandLabel, selectedLabel), so you can translate them. Tabs and the pill take keyboard focus with a visible ring and activate with Enter or Space, the hidden tabs leave the focus order while minimized, and labels follow text sizes up to 200%.
  • 1.1.3 2026-10-03 The usage example passes the scroll controller of the list behind the bar, instead of a new controller that watches nothing and so never minimizes the bar.
  • 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 Expanding the bar partway down the content (tapping the pill or setting minimized: false) no longer re-minimizes it on the next pixel of scroll, turning minimizeOnScroll back on no longer counts scrolling done while it was off, and turning it off while minimized returns the bar to minimized (expanding it by default).
  • 1.1.0 2026-10-03 Minimizes like iOS 26: pass scrollController with minimizeOnScroll and scrolling down springs the bar into a glass pill at the leading edge showing the selected tab's icon; scrolling up, reaching the top or tapping the pill expands it. Adds minimized to drive it yourself, onMinimizedChanged, and jumps instead of springing when reduced motion is on.
  • 1.0.0 2026-10-01 First release.

Parameters

The tab selected at first, counting from 0. Past the last tab, the last tab is selected.

How much the glass frosts what's behind it.

How strongly the glass bends what's behind it near its edges.

32 makes a pill.

Shrinks the bar to a pill when the content behind it scrolls down, and expands it on scrolling up. Needs the content's scrollController.

Shows the bar as a pill with only the selected tab's icon. Changing it later springs the bar between the two.

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 Tab Bar Component to this Flutter app. Call get_export with componentId "glass-tab-bar" and parameters {"tabCount":4,"selected":0,"label1":"Home","icon1":"home","label2":"Search","icon2":"search","label3":"Saved","icon3":"heart","label4":"Profile","icon4":"person","label5":"Settings","icon5":"settings","blur":2,"refraction":0.7,"tint":"FFFFFF","tintStrength":0.08,"rim":0.7,"cornerRadius":32,"shadow":0.4,"minimizeOnScroll":false,"minimized":false}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/glass-tab-bar?tabCount=4&selected=0&label1=Home&icon1=home&label2=Search&icon2=search&label3=Saved&icon3=heart&label4=Profile&icon4=person&label5=Settings&icon5=settings&blur=2&refraction=0.7&tint=FFFFFF&tintStrength=0.08&rim=0.7&cornerRadius=32&shadow=0.4&minimizeOnScroll=false&minimized=false)