Flutter animation example
Flutter Animated Icons: Play, Menu and Add Morphs
Flutter ships AnimatedIcon for a handful of pairs. These three show how far a morph can go when you control every point: the play triangle splits into two pause bars, the menu bars fold into an X, and the plus turns and redraws itself as a checkmark. Each icon has a ring that pulses when it changes.
- 4.5 KB file
- 6 live inputs
- Flutter runtime
How this morphing icons works
- Each icon is defined by matching point lists for both states; the morph interpolates every point.
- Progress for each icon is its own spring, so tapping quickly mid-morph reverses smoothly.
- Tapping fires "toggle"; all three states can also be set from inputs.
Add it to your Flutter app
Install exodeui_flutter, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:exodeui_flutter/exodeui_flutter.dart';
// Add assets/flutter-animated-icons.exode to pubspec.yaml (download it below).
class FlutterAnimatedIcons extends StatefulWidget {
const FlutterAnimatedIcons({super.key});
@override
State<FlutterAnimatedIcons> createState() => _FlutterAnimatedIconsState();
}
class _FlutterAnimatedIconsState extends State<FlutterAnimatedIcons> {
final _canvas = GlobalKey<ExodeUICanvasState>();
late final Future<String> _json = rootBundle.loadString('assets/flutter-animated-icons.exode');
@override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: _json,
builder: (context, snap) => snap.hasData
? ExodeUICanvas(
key: _canvas,
artboardJson: snap.data!,
fit: 'Layout',
onReady: () { },
onTrigger: (name, _) {
// fires: 'toggle'
},
)
: const SizedBox.shrink(),
);
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
playing | Boolean | false | — |
menuOpen | Boolean | false | — |
added | Boolean | false | — |
accent | Text | #ec4899 | hex colour |
ink | Text | #fdf2f8 | hex colour |
bg | Text | #140a10 | hex colour |
Events: toggle
More Flutter animations
Bouncing Bars LoaderFive bars bouncing in a travelling wave with squash and stretch, plus rotating status messages.Speed Dial FABA floating action button that rotates to close while three labelled actions spring out in sequence.Hero Product TransitionA list item whose image arcs into the detail header while a circular reveal uncovers the page.3D Drawer MenuA side menu revealed by the page swinging back in 3D; open by tapping or dragging from the edge.Wavy TypewriterA typewriter whose letters drop in with a bounce; words type, hold, delete and cycle.Parallax Scroll ListA scrolling list of cards whose images shift at a slower rate, with momentum and edge bounce.
The same idea in other frameworks: React like heart icon · SwiftUI symbol effects · JavaScript success checkmark