Flutter Motion Kit

Previewable Flutter animations + pitfall guide · one-click reuse from Claude Code

The verified catalog: every animation runs live in the browser (real Flutter web, not a screen recording), ships copy-paste code, and is annotated with its pitfalls (with sources and confidence). Search and reuse them straight from Claude Code / Cursor via MCP.

One-click into your AI editor
Add to Cursor Add to VS Code
claude mcp add --transport http flutter-motion https://mcp.markxian.cn/mcp
▶︎ Open the interactive Playground Drag sliders for live tweaks · code highlights in sync · covers all 6 categories
all custom-painterexplicitheroimplicitphysicsstaggered

Swipe to dismiss

A ListView of rows wrapped in Dismissible. Swipe a row to fling it off-screen over a colored background; onDismissed removes the item from the data source so the list and the widget tree stay consistent.

explicit difficulty 2/5 ⚠ 4 pitfalls

Expand / collapse (AnimatedSize)

A tappable header expands and collapses a body whose height is unknown. Pure implicit animation: AnimatedSize tweens to whatever intrinsic size its child reports — no manual controller, no measuring.

implicit difficulty 2/5 ⚠ 4 pitfalls

Hero shared-element transition

Tap a grid item and the element "flies" to its spot on the detail page. Both ends share one Hero tag and the framework takes over the transition.

hero difficulty 2/5 ⚠ 4 pitfalls

Custom page transition (fade + slide-up)

Use PageRouteBuilder to customize the enter animation (fade + a slight slide-up) instead of the default platform transition.

explicit difficulty 2/5 ⚠ 4 pitfalls

AnimatedList insert & remove

An AnimatedList driven by a GlobalKey<AnimatedListState>. Adding calls insertItem with a SizeTransition+FadeTransition entrance; tapping removes via removeItem, whose builder animates the just-removed item out.

explicit difficulty 3/5 ⚠ 4 pitfalls

3D card flip

Tap a card to flip it 180° around the Y axis and reveal the back. An AnimationController drives an AnimatedBuilder + Transform whose Matrix4 carries a perspective term so the rotation reads as a real card, not a flat squash.

explicit difficulty 3/5 ⚠ 4 pitfalls

Draggable bottom sheet

A bottom sheet the user can drag between heights and then scroll its contents. DraggableScrollableSheet hands the builder a ScrollController that composes the drag and the inner scroll so the hand-off feels seamless. Adds snap points.

explicit difficulty 3/5 ⚠ 4 pitfalls

Shimmer skeleton loading

Show a sweeping shimmer placeholder while data loads. A single controller + a ShaderMask gradient sweep is cheaper than one controller per item.

explicit difficulty 3/5 ⚠ 4 pitfalls

Collapsing SliverAppBar (parallax)

A scroll-driven collapsing header: a SliverAppBar with expandedHeight and a FlexibleSpaceBar whose background parallaxes while the bar shrinks to a pinned toolbar. No AnimationController — the scroll offset is the driver.

explicit difficulty 3/5 ⚠ 4 pitfalls

Staggered list entrance

List items fade-and-slide in one after another. A single AnimationController + Interval drives the stagger — cheaper than one controller per item.

staggered difficulty 3/5 ⚠ 4 pitfalls

CustomPainter progress ring

A circular progress ring whose arc sweeps from 0 to full, driven by an AnimationController passed to CustomPainter's super(repaint:) so it repaints off the animation rather than off parent rebuilds. The Paint is cached.

custom-painter difficulty 4/5 ⚠ 4 pitfalls

Spring drag & release

Drag a box and release it; it springs back to center with a SpringSimulation fed to animateWith. The release (pan) velocity becomes the simulation's initial velocity, so the motion continues naturally from the gesture.

physics difficulty 4/5 ⚠ 4 pitfalls