g1455Liquid Glass for Flutter
The g1455 design system: Liquid Glass for Flutter — refraction, blur, tint and a rim over the live backdrop. Every component live, with its guide, its code and its API.
flutter pub add g1455Get started · Components · GitHub · pub.dev
For AI agents: the agent skill (npx skills add PlugFox/g1455),
llms.txt, and every page as markdown at its address plus .md.
Getting started
- InstallationAdd the package, put one GlassHost above the navigator, and lay the first glass over content.
- How it worksOne host captures the backdrop once for every glass surface, only when something under the glass changed.
- What the app declaresWhat the package cannot read from the render tree: the backdrop, the appearance, reduce transparency, contrast, thermal state.
- Platforms & webThe same glass on Impeller (Metal, Vulkan, GLES), on Skia, and on the web with CanvasKit and Skwasm.
- Misuse & common errorsWhat goes wrong with glass and why: missing glass, holes, grey boxes, a capture on every frame, and the debug messages the package prints, each with its fix.
- AI agentsAn agent skill for Claude Code, Codex, Cursor, Antigravity, Gemini CLI and Copilot: the rules for writing glass, and every page of this site, installed with one command.
Foundations
- GlassHostThe engine room of a screen: one capture of the backdrop for all its glass, re-taken only when it changed.
- GlassSurfaceThe primitive: a box of the screen that is glass. It refracts, blurs and tints the backdrop, then paints its child.
- FinishesThe material of the glass: regular dark and light, clear and frosted, calibrated against Apple's iOS 26 materials.
- Legibility & themeHow glass components choose black or white labels, keep them readable, and how a subtree gets its own look.
- Adaptive glassGlass that reads its own backdrop: a bar over a bright sky turns light, a button over a shadow stays dark, each with a label to match. Off by default and free when off.
- Tiers & fallbacksFull glass, a cheap translucent fill, or opaque: the rung for reduce transparency, low-end devices and tests.
- RippleAn optional liquid wave when glass is touched, from water to honey. Not an Apple behaviour, off under reduced motion, and it costs no capture.
- Drop motionThe held drop of the switch, slider, segmented control and tab bar stretches as it sets off, squashes as it stops and springs back round. One spec for the app, or per control.
- Groups & unionsDraw several glass surfaces as one piece of liquid glass: GlassGroup fuses them when they come close, GlassUnion keeps them joined at any distance.
- TravelDeclare the region moving glass travels in, so a dragged lens or a sliding knob is redrawn from the capture the host already holds instead of triggering a new one.
- Glass on glassGlass inside other glass refracts it automatically. A bar floating over sibling glass, such as glass cards, needs GlassAbove to show them.
- Capture controlTell the capture what a subtree is: paint a stand-in for a video or a platform view, leave a subtree out, mark an opaque cover, or keep a blur the shadow filter would drop.
- Declared backdropDeclare a backdrop the app already knows (a colour, a gradient, a wallpaper) so the glass over it samples a texture made once and the host captures nothing for it.
- Scroll edgeiOS 26's scroll edge effect: content softly blurs and fades as it scrolls under a bar, or meets an opaque band. It also holds and lifts the bar.
- PerformanceWhat glass costs and how to keep it cheap: surface count, button groups, travel regions, thermal state, and the ledger that reports the glass on screen.
Components
- BarGlassBar is a floating glass capsule for navigation: a title bar, a bottom bar or a now-playing pill, with black or white labels picked for legibility.
- ButtonGlassButton is a tappable glass capsule that brightens and swells while held, with a 44 × 44 minimum tap target, keyboard focus and dimmed labels when disabled.
- CardGlassCard is a rounded glass panel for a few floating groups of content, such as widgets on a wallpaper, with a legible label colour for its children.
- SwitchGlassSwitch is the iOS 26 on/off switch: a white knob that lifts into a clear glass drop while you press or drag it, and costs nothing extra at rest.
- SliderGlassSlider is a 0 to 1 slider, continuous or in steps, whose knob turns into a clear glass drop while you drag it, for volume, brightness or a scrubber.
- Segmented controlGlassSegmentedControl picks one of two to five options. The selected segment lifts into a clear glass drop you can slide to another segment.
- Tab barGlassTabBar is the floating iOS 26 tab bar. The selected tab lifts into a glass drop you can drag from tab to tab, and the bar can collapse to that tab on a scroll down.
- StepperGlassStepper is a minus and a plus in one glass capsule, as UIStepper: a held half repeats, the end at a limit is disabled, and a press costs no capture.
- Page controlGlassPageControl is the row of page dots on a glass capsule: it follows a PageView as it scrolls, a tap steps toward its side, and a drag scrubs.
- Search barGlassSearchBar is the glass search field with a clear button and a Cancel that slides in on focus. One surface; the slide is its one cost, a capture a frame for 250 ms.
- BadgeGlassBadge puts a count, a label or a dot on the corner of an icon or a tab: an opaque red capsule, not glass, as iOS 26 draws one. It costs no surface.
- Text fieldA single-line text field in its own glass capsule, like the search field of an iOS 26 bar. Text, placeholder and icons take a legible colour.
- ToolbarSeveral toolbar actions in one glass capsule, the way iOS 26 groups toolbar items. One surface for any number of actions, so it costs far less than a row of buttons.
- AlertiOS 26's alert on glass: a title, an optional message and capsule actions, shown over a dim with showGlassDialog. It materializes in, blur first and tint last.
- SheetA floating glass bottom sheet with a grabber that follows the finger: dragged down to dismiss, pulled up to a large detent, and awaited for the value it was closed with.
- MenuiOS 26's pull-down menu: a glass list of actions that grows out of the button that opened it. Choosing a row runs it and closes the menu.
- PopoverA glass panel of any content that grows out of its anchor and stays open while it is used: for quick settings and filters changed in place.
- MorphOne piece of glass that flows to the size of whatever child it holds: a button that becomes a panel, with a liquid neck while it moves.
- ScaffoldGlassScaffold is a whole screen wired the recommended way: a top bar in a scroll edge, an optional bottom bar and floating action, and a body that scrolls under them.
Demos
- ScrollA list scrolling under glass bars, a slider and a lens to drag across the content.
- ControlsSwitches, sliders and buttons on glass cards, over a backdrop they repaint.
- BlobsMetaballs: glass blobs that fuse into one silhouette as they orbit.
- CardsA photo grid with a glass caption on every photo — many surfaces, one capture.
- KitSegmented controls, search, toolbars, alerts, sheets and menus on glass cards.