Animating a production app with tens of thousands of users
summary
A Flutter production app (Cheddar) with over 50k users uses simple, reusable animations built from AnimationController plus implicit widgets like AnimatedSwitcher, AnimatedAlign, AnimatedOpacity and AnimatedScale to implement a processing flow (bank redirect → processing → completed), a shrinking logo splash, and story-style onboarding. Each effect maps app states to tiny widgets, shares one controller split into intervals, delays the final check icon inside the widget, and stays testable by disabling animations in tests and exposing the controller for golden snapshots.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 2:11Two worlds of Flutter
- 3:58Cheddar app overview
- 8:37Reusable animation widgets
- 10:03Turning gaps into opportunities
- 18:56Simplicity in animation widgets
- 19:42Animated splash screens
- 26:01First impressions matter
- 26:45Onboarding flow with stories
- 33:47Testing complex animations
- 35:37Scaling animations for users
related talks
22mOne Engine to Animate Them All: React Native Animated in C++
27mMoving Beyond Animations to User Interactions at 60 FPS in React Native
28mMonster Apps: Meatscope + Polymon
42mLet the Main Thread Breathe!
30mMaking your app fast with high-performance components
25mFirefly: Untethered Multi-user VR for Commodity Mobile Devices
16mBlast Off: Managing Hundreds of UI Updates for Emoji Cannons
25mProgressive Web Animations