AnimationsMedium30 XP4 min read
How do you integrate Lottie and Rive animations in Flutter?
TL;DR: Lottie plays JSON-based After Effects animations. Rive supports interactive state machines (press → playing → complete). Lottie is better for pre-rendered motion design; Rive is better for interactive and game-like animations with state transitions.
Full Answer
| Aspect | Lottie | Rive |
|---|---|---|
| Format | JSON (exported from After Effects) | .riv (Rive editor, web-based) |
| Interactivity | Play/pause/speed only | State machines, inputs, events |
| Best for | Pre-rendered loading, splash, icons | Characters, interactive UI, games |
| Size | Larger JSON files | Smaller .riv binary format |
🎯
Use Lottie for decorative animations (loading spinners, success checkmarks). Use Rive when the animation needs to respond to user input or app state — button press, level up, character movement.
Code Examples
dartLottie and Rive integration
Output
// Lottie: plays After Effects animation frame by frame // Rive: character stays 'idle', switches to 'running' on input // Rive state machines: designer controls transitions, no code changes
Common Mistakes
- ✗Using Lottie for interactive animations — it doesn't support state machines
- ✗Large Lottie files with many layers — each layer can be a separate draw call; optimize in After Effects or use Rive instead
Interview Tip
💡
The key differentiator: Lottie is playback-only, Rive is interactive. For a 'Press and hold to confirm' button with animated feedback, Rive is the right tool. For a loading spinner, Lottie is simpler.
#Lottie#Rive#design-animations#interactive