Skip to main content

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
Live, try it

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

InputTypeDefaultRange
playingBooleanfalse—
menuOpenBooleanfalse—
addedBooleanfalse—
accentText#ec4899hex colour
inkText#fdf2f8hex colour
bgText#140a10hex colour

Events: toggle

More Flutter animations

The same idea in other frameworks: React like heart icon · SwiftUI symbol effects · JavaScript success checkmark