Playground · Overlays & sheets

Live Activity Pill

  • motion component
  • iOS
  • Android
  • Flutter 3.47.0+

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.

Version 1.2.0 · What changed
  • 1.2.0 2026-10-07 New statusGlow and statusColor Parameters paint a breathing, status-coloured glowing rim that follows the capsule as it morphs (drawn still with reduced motion), and new actions and onAction arguments add up to 3 buttons under the expanded card, reachable by tap, keyboard and screen reader, each 48 points tall. Both are off by default, so the pill looks as before.
  • 1.1.0 2026-10-06 New progressLabel argument translates the percentage a screen reader reads out (the title, subtitle and value are already arguments). The pill can now be focused with a keyboard, is outlined while focused and toggles with Enter or Space, and the compact pill takes taps 48 points tall though it still draws 36.
  • 1.0.1 2026-10-03 Toggling reduced motion mid-morph no longer leaves the pill at the wrong size afterwards; the pill now sizes itself inside IntrinsicHeight and IntrinsicWidth and supports dry layout; and a compact value too long for the space is cut short with an ellipsis instead of pushing the icon out of the pill.
  • 1.0.0 2026-10-03 First release.

Parameters

Whether the pill starts open as a card. After a tap it keeps its own state, and follows this again only when it changes.

The activity's name, on the expanded card.

A line of detail under the title. Empty hides it.

A short live value, such as a timer or an ETA: at the end of the compact pill, and larger on the card.

How far along the activity is, in percent, shown by the card's progress bar. Changes animate.

The icon, the value, the progress bar and the glow.

The title and, a little dimmer, the subtitle.

How strongly a ring of the accent colour glows around the pill while the activity is live. 0 turns it off.

How much the morph overshoots and wobbles as it settles. 0 settles without overshoot.

Paints a breathing glowing rim in the status colour around the capsule, in place of the accent glow. It follows the capsule as it morphs; with reduced motion it is drawn still.

The colour of the status glow, such as amber for a delay or red for a problem. Used only while the status glow is on.

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 Live Activity Pill Component to this Flutter app. Call get_export with componentId "live-activity-pill" and parameters {"expanded":true,"icon":"car","title":"Your driver is nearby","subtitle":"Silver sedan · 7KX 284","value":"4 min","progress":68,"accentColor":"30D158","textColor":"FFFFFF","glow":0.6,"bounciness":0.45,"statusGlow":false,"statusColor":"FF9F0A"}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/live-activity-pill?expanded=true&icon=car&title=Your+driver+is+nearby&subtitle=Silver+sedan+%C2%B7+7KX+284&value=4+min&progress=68&accentColor=30D158&textColor=FFFFFF&glow=0.6&bounciness=0.45&statusGlow=false&statusColor=FF9F0A)