Catalog
Every Component comes as Flutter source you own. Open one to tune it.
Backgrounds
Backgrounds
AI Glow Edge
A soft band of flowing colour hugging the edges of the screen, the assistant-is-listening look: it travels and breathes, brightens when active and swells with the voice level.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Backgrounds
Aurora Background
An animated mesh-gradient backdrop: soft colour fields drifting over a dark base, with optional grain and vignette.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Backgrounds
Mesh Gradient
A soft gradient between four colours that slowly breathe and drift: a calm backdrop that text can sit on.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Surfaces & cards
Surfaces & cards
Before/After Slider
A before and after comparison: two pictures stacked under a divider with a round grab handle that you drag, tap or arrow-key across to reveal one over the other, with Before and After pills, a rubber-band at the edges and a hint that sweeps the divider once when it appears.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Surfaces & cards
Liquid Glass Card
A clear glass card with a rounded, light-catching rim that bends whatever is behind it. Float it over your content.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Surfaces & cards
Parallax Header
A collapsing hero header for a scroll view: the background drifts at a fraction of the scroll speed, the large title shrinks into a frosted bar pinned at the top, and pulling down stretches the hero.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Surfaces & cards
Progressive Blur Header
An iOS 26-style scroll edge: a floating title bar with no divider, where the content scrolling under it blurs progressively, strongest at the top edge and easing back to sharp, under a soft tint.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Navigation
Navigation
Floating Glass Toolbar
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.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Navigation
Glass Tab Bar
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.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Buttons & controls
Buttons & controls
Connected Button Group
- motion component
- iOS
- Android
- Flutter 3.47.0+
Buttons & controls
Morphing Action Button
- motion component
- iOS
- Android
- Flutter 3.47.0+
Buttons & controls
Segmented Control
An iOS 26-style segmented control: a selection pill that springs between two to five segments, stretching as it travels, which you can tap or drag, while the labels crossfade to bold.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Buttons & controls
Split Button
- motion component
- iOS
- Android
- Flutter 3.47.0+
Buttons & controls
Spring Press Button
- motion component
- iOS
- Android
- Flutter 3.47.0+
Buttons & controls
State Button
- motion component
- iOS
- Android
- Flutter 3.47.0+
Inputs & forms
Inputs & forms
Blur Wheel Picker
An iOS-style wheel picker that snaps row by row: the rows away from the middle fade, shrink and blur the farther they are, while the chosen row stays crisp and bold inside a subtle glass band, with a light haptic click each time it settles and an optional counter beside it.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Inputs & forms
Detent Slider
A premium slider with a thick rounded track and tick marks at its detents: the thumb stretches with the drag, clicks into each detent, rubber-bands past the ends and settles with a spring, while its value springs up into a bubble.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Inputs & forms
Glass Text Field
A single-line text field on liquid glass: its label floats up as you type, the rim brightens and a soft accent glow eases in on focus, and a clear button fades in with your text.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Inputs & forms
Liquid Toggle
A switch whose knob stretches like a droplet as it crosses the track and springs into place, while the track fills with a softly glowing colour.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Inputs & forms
Prompt Bar
The input bar of an AI assistant: a pill that grows with your message, a send button that goes grey, accent arrow, stop square as the state changes, a placeholder that slides through suggestions, and a gradient rim that glows while you type or it answers.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Loading & feedback
Loading & feedback
Confetti Burst
A celebratory burst of confetti that shoots out in a cone, then flutters, spins and falls before fading, painted over your screen without getting in the way of taps.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Loading & feedback
Scan Overlay
Frames a photo, camera preview or document with four corner brackets that spring in, then sweeps a glowing scan line down it. When the scan is done the brackets snap tight and turn green and a result card rises; a reveal mode follows a progress value instead, sharp above the line and blurred below.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Loading & feedback
Shape-Morphing Loader
A Material 3 Expressive loading indicator: a filled shape that keeps morphing from a soft burst to a cookie, a pentagon, a pill and more, settling into each with a little spring while it turns, optionally inside a circular container.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Loading & feedback
Shimmer Skeleton
Placeholder blocks with a travelling sheen, shaped like the list, card or profile they stand in for while it loads.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Loading & feedback
Wavy Progress
A Material 3 Expressive progress indicator whose filled part is a travelling sine wave, with a gap, a flat remaining track and a stop dot, as a bar or a ring. The wave calms to a flat line as it completes, and an indeterminate mode sweeps a wavy segment along the track.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Text & typography
Text & typography
Number Ticker
A number whose digits roll to each new value, column by column, so counters, prices and scores feel alive.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Text & typography
Shimmer Text
A heading with a band of light sweeping across it, to draw the eye to a title.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Text & typography
Streaming Answer
An assistant's answer arriving: a status line whose label shimmers through the steps, then the text streams in with each new stretch fading up out of a soft blur, a blinking caret at the end, and Copy and Retry sliding in when it is done.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Text & typography
Word Reveal Text
A block of text that reveals word by word: words that sharpen from a blur and drift up, a karaoke highlight that follows the words like captions, or a marker band that wipes in behind chosen words.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Lists & collections
Lists & collections
Checklist
A card of tappable rows for grocery lists and onboarding steps: each circle springs into a check, the label strikes through with a line that draws across, a progress line fills as a count rolls, and a call-to-action slides in when everything is done.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Lists & collections
Leaderboard Race
A ranked list that races: bars grow on a spring, scores roll, and rows that overtake slide past each other to their new rank, with a crown that hops to the new leader, a highlighted row for you that pulses when it moves, and a caption saying how far ahead the leader is.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Lists & collections
Masked Hero Carousel
A Material 3 hero carousel: the focused item is large and the ones after it get narrower, each revealing its full-size content through a rounded mask with a touch of parallax, growing and shrinking smoothly as it scrolls and snapping to items.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Lists & collections
Search Filter List
A search field above a list that filters as you type: rows that stop matching fade and fold shut, the matches slide up into place best first with the matched text tinted, a result count rolls, and an empty state fades in.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Lists & collections
Swipe Card Stack
A stack of cards you swipe away: the top card follows the finger and tilts, flies off on a spring when thrown, and the cards behind rise into its place.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Overlays & sheets
Overlays & sheets
Glass Bottom Sheet
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.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Overlays & sheets
Glass Dialog
A modal dialog on liquid glass, with a title, a message and one or two buttons, that springs in over a dimmed screen and leaves the same way.
- shader component
- iOS
- Android
- Flutter 3.47.0+
Overlays & sheets
Live Activity Pill
A Dynamic Island-style status pill: a black capsule at the top of the screen showing a live timer or ETA, which springs open, width first and then height, into a card with a title, a subtitle and a progress bar.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Overlays & sheets
Toast Stack
A stack of toasts that spring in at the top or bottom of the screen, newest in front, older ones scaling down and tucking behind; tap to fan them open. Each has a status indicator that morphs from a spinner to a check, a title, an optional message and action, and swipes away.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Transitions
Transitions
Ripple Reveal
Swaps one view for another inside a circle that grows from a point until it fills the area, its edge lit by a soft ring of light.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Transitions
Skeleton Crossfade
Shows a shimmering skeleton while content loads, then sweeps one last bright sheen across it and dissolves into the real content, which sharpens from a soft blur and settles into place.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Onboarding
Onboarding
Badge Unlock
An achievement badge with a metallic rim and an emblem that unlocks with a flourish: it springs up from dim and locked, a glow blooms, a sheen sweeps across its face and gold sparkles drift out, then it tilts like a solid object under your finger.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Onboarding
Page Dots
An onboarding page indicator whose active dot travels to the next page as a stretching worm, a widening pill or a small hop, following the swipe as it happens.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Onboarding
Step Progress
A row of numbered step markers for checkouts, setup wizards and order tracking: finished steps fill in with a check that draws itself, the line between them fills with colour like a liquid, and the current step is a ringed number that pulses.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Charts & data
Charts & data
Bar Chart
A compact bar chart for an activity card: the bars spring up from the baseline one after another, glide to new values from wherever they are, and one highlighted bar glows in a gradient with its value above it.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Charts & data
Dot Grid
A grid of rounded dots that fills in a ripple to show a value, each dot springing in size and colour as it lights up, with a big number counting up beside it. Switch it to a streak calendar and it colours a week-by-week grid from a list of daily intensities.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Charts & data
Line Chart
A line chart that draws itself in from left to right under a soft gradient fill, ending in a glowing dot, and again whenever its data changes. Touch and drag, or use the arrow keys, to scrub a cursor with a value chip across the points; an optional grey line compares a benchmark.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Charts & data
Liquid Fill Gauge
A glass, flask, bottle or battery that fills with liquid to its value: a moving two-layer wave surface that sloshes when the level changes, drifting bubbles, optional tick marks and a readout that counts with the level in two colours, one above the liquid line and one below.
- motion component
- iOS
- Android
- Flutter 3.47.0+
Charts & data
Ring Progress
A circular progress ring that sweeps to its value with a smooth ease, a colour gradient along the arc and a soft glow at its tip, with the percentage counting up in the centre.
- motion component
- iOS
- Android
- Flutter 3.47.0+