Playground · Onboarding

Page Dots

  • motion component
  • iOS
  • Android
  • Flutter 3.47.0+

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.

Version 1.1.0 · What changed
  • 1.1.0 2026-10-06 New pageLabel argument words what a screen reader hears ('Page 2 of 4') so it can be translated. With onDotTapped, the dots now take keyboard focus (arrow keys change page, with a focus ring), the row is at least 48 pixels tall to touch, and the default inactive dot is lighter (71717A) to reach 3:1 contrast on dark surfaces.
  • 1.0.1 2026-10-03 The usage example passes your PageView's controller, instead of a new controller that follows no pages.
  • 1.0.0 2026-10-02 First release.

Parameters

How many dots, one per page.

The page shown, counting from 0. Past the last page, the last dot is active. Ignored when a controller is given.

The diameter of each dot, in logical pixels.

The gap between neighbouring dots, in logical pixels.

How the active dot travels: worm stretches to the new dot and pulls its tail after it; expand widens the new dot into a pill as the old one shrinks; jump hops across in a small arc.

How long a change of page takes to animate, in seconds. While following a controller, the dots track the swipe instead.

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 Page Dots Component to this Flutter app. Call get_export with componentId "page-dots" and parameters {"count":4,"page":1,"dotSize":14,"spacing":12,"activeColor":"7C5CFF","inactiveColor":"71717A","style":"expand","duration":0.5}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/page-dots?count=4&page=1&dotSize=14&spacing=12&activeColor=7C5CFF&inactiveColor=71717A&style=expand&duration=0.5)