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
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, reduce transparency, contrast, thermal state.
- Platforms & webThe same glass on Impeller (Metal, Vulkan, GLES), on Skia, and on the web with CanvasKit and Skwasm.
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.
- 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.
- 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.
- 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 while held, with a 44 × 44 minimum tap target 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 continuous 0 to 1 slider 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 that magnifies the bar and can be dragged from tab to tab.
- 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, inset from the screen edges. Drag it down or flick it to dismiss, and await 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.
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.