Make it move.
Small interactions. A whole different feeling. Explore, adjust, and make an idea your own.
Find your next little detail.
Spring dock
A navigation bar with a little lift.
Morphing button
Ready, working, and all done.
Perspective flip
Two sides. One clear connection.
Card carousel
A stack that invites the next move.
Elastic toggle
A switch with personality.
Staggered menu
Let each option arrive in order.
Expanding detail
More detail, exactly where you are.
Number change
Make a small change easy to notice.
Bottom sheet
A focused action, a gentle entrance.
Theme reveal
Change the mood from one small point.
Pointer depth
A card that follows your curiosity.
Progress ring
A change you can see and read.
Good motion has a reason.
Same movement. Different personality.
A short transition feels responsive. A longer one gives people time to follow a change. Start with the task, then adjust the timing.
Show where the next thing came from.
Expand and depth connect the starting state to the result. Use them when the relationship helps people understand the interface.
Let the user set the pace.
Motion should be easy to interrupt and repeat. Keep a calm mode, clear focus states, and tap controls wherever hover is available.
Start with a tutorial
Explained step by step with runnable Dart code.
Search all resources
39 items — tutorials, animation labs, and studio presets.
Build a Flutter Profile Card from a JSON Schema
Deconstruct how to compose Container, Row, Column, Text, and Icon widgets into an adaptive profile card with full standalone Dart code generation.
Understand Row, Column, and Wrap Constraints
Deconstruct RenderFlex overflow errors and learn when to apply Wrap, Expanded, or Flex sizing to create resilient multi-screen layouts.
Customize AnimatedContainer Dynamics
Explore implicit animation curves, duration tuning, and state toggles with mathematical interpolation and clean Flutter state management.
Fix AnimatedSwitcher Transitions with ValueKeys
Understand why AnimatedSwitcher silently ignores child updates of the same widget type, and master the element tree diffing algorithm with ValueKeys.
Prevent Stale Asynchronous Results from Overwriting UI State
Master request identity sequencing, cancellation tokens, and mounted checks to prevent out-of-order network responses from corrupting newer screens.
Clean Up Controllers, Listeners, Timers and Async Callbacks
Prevent memory leaks and "setState() called after dispose()" crashes by mastering resource disposal order and lifecycle cleanup.
Use GetX Controllers, Bindings and Workers Responsibly
Avoid memory leaks and hidden global state in GetX apps using scoped Bindings, onInit/onClose lifecycle hooks, and worker disposal.
Convert HTTP Responses into Strongly-Typed Data and Failures
Deconstruct how to parse API responses safely, handle missing vs null fields, preserve large numeric IDs, and model HTTP failures without catch-all exceptions.
Build Pagination and Search Without Stale-Result Bugs
Combine debounced search with monotonic page generation IDs and deduplication to eliminate race conditions and duplicated items during infinite scrolling.
Build Responsive LayoutBuilder and Adaptive GridView Layouts
Construct adaptive multi-screen dashboards that gracefully adjust column counts, padding, and font scales across 360px mobile, 768px tablet, and 1440px desktop displays.
Localize Text, RTL Layouts, Placeholders and Plural Forms
Deconstruct how to configure Flutter localization with ARB bundles, enforce mandatory ICU fallback branches, handle literal quote escaping, and mirror UI layouts with Directionality.
Distinguish Build/UI Work from Raster Work in a Janky Screen
Use Flutter DevTools performance profiler to diagnose frame drops, isolate CPU build bottlenecks from GPU raster shaders/clips, and apply RepaintBoundary fixes.
A01: AnimatedContainer
Two visual states; dimensions, padding, radius, color, duration and curve
A02: AnimatedOpacity & Hit Testing
Fade states and demonstrate IgnorePointer click-through behavior
A04: AnimatedPadding & AnimatedSize
Dynamic spacing and content size while keeping parent layout stable
A08: AnimatedSwitcher & Keys
Missing transition reproduced vs corrected identity using ValueKeys
A09: TweenAnimationBuilder
Custom rotation/color tween with a reusable static child
A10: AnimationController & Builder
Vsync, lifecycle, play/pause, seek slider, reverse and disposal
A13: Curve Explorer & Overshoot
Compare named cubic curves and bounce/elastic overshoot side by side
A24: Button State Machine Motion
Idle, loading spinner, success checkmark, and error shake transitions
MP01: Spring Dock
Selected destination lifts and highlights with a spring curve
MP02: Morphing Button
Idle → working → success; reset/retry with labelled simulation
MP03: Card Carousel
Previous/next through a short layered collection with stable keys
MP04: Elastic Toggle
Thumb and track reflect a boolean preference with bounded overshoot
MP05: Staggered Menu
Menu options arrive in sequence; hidden items are not focusable
MP06: Number Change
Increment/decrement with a readable value transition and stable layout
MP07: Bottom Sheet
Related task opens from the bottom with real modal route semantics
MP08: Theme Reveal
Explicit light/dark reveal inside the preview using ClipPath
MP09: Pointer Depth Card
Bounded pointer depth with a touch alternative and cleanup on unmount
Preset: Profile Card Layout
Avatar, badge, typography, social counters and follow button
Preset: E-Commerce Product Tile
Product thumbnail, price styling, stock indicator and CTA button
Preset: Settings List Section
Grouped configuration items with leading icons and trailing indicators
FX01: Horizontal Flex Overflow
Understand width constraints and RenderFlex overflow in a Row
FX02: Unbounded List Height
Choose a bounded layout matching intended scroll behavior in Column
FX03: ParentData Placement
Direct child placement constraints for Positioned and Expanded
FX04: State Update After Disposal
Cancel asynchronous work and prevent late setState calls
FX05: AnimatedSwitcher Identity Key
ValueKey requirements for child transitions in AnimatedSwitcher
FL01: Pagination & Infinite Scroll
Loading, appending, error retry, duplicate debounce, and stale response protection
FL02: Debounced Ordered Search
Debounce timing, out-of-order completion guards, and disposal cleanup