AnimationsMedium30 XP3 min read
What is the difference between Rive and Lottie in Flutter?
TL;DR: Lottie plays pre-exported After Effects animations (JSON) with no interactivity. Rive supports state machines and real-time interactivity driven by Flutter code, making it suitable for game-like and responsive animations.
Full Answer
| Aspect | Lottie | Rive |
|---|---|---|
| Source | Adobe After Effects + Bodymovin | Rive editor (online tool) |
| Interactivity | Playback control only | State machines, triggers from Dart |
| File size | JSON (can be large) | .riv binary (smaller) |
| Use case | Decorative illustrations, loaders | Buttons, characters, games |
| Package | lottie | rive |
🎯
For a loading spinner or onboarding illustration, Lottie is simpler. For an interactive character or animated button that responds to user state, use Rive.
Code Examples
dartLottie vs Rive usage
Output
// Rive: call _hoverInput.value = true to trigger hover state
Common Mistakes
- ✗Using Lottie for anything interactive — it doesn't support state machines
- ✗Large Lottie files with heavy AE effects that don't translate well to mobile
Interview Tip
💡
Show you know when to pick each tool. Lottie = fire-and-forget illustrations. Rive = logic-driven animation that responds to app state.
#rive#lottie#vector-animation#interactive