Skip to main content

Flutter animation example

Flutter Animated Button: Speed Dial FAB

A speed dial packs several actions behind one floating button. Tap it and the plus turns 45 degrees into a close icon while three mini buttons fly up on springs, each a beat after the last, with their labels sliding in from the side. A scrim dims the screen so the choice is obvious.

  • 4.3 KB file
  • 5 live inputs
  • Flutter runtime
Live, try it

How this speed dial fab works

  • One open spring drives everything; each action reads it with its own delay, so they arrive in sequence.
  • The main button rotates by open × 135 degrees, which lands the plus exactly on an X.
  • Tapping an action fires "action" and closes the dial; the open state is an input.

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-fab.exode to pubspec.yaml (download it below).
class FlutterAnimatedFab extends StatefulWidget {
  const FlutterAnimatedFab({super.key});
  @override
  State<FlutterAnimatedFab> createState() => _FlutterAnimatedFabState();
}

class _FlutterAnimatedFabState extends State<FlutterAnimatedFab> {
  final _canvas = GlobalKey<ExodeUICanvasState>();
  late final Future<String> _json = rootBundle.loadString('assets/flutter-animated-fab.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: 'action'
              },
            )
          : const SizedBox.shrink(),
    );
  }
}

Inputs

InputTypeDefaultRange
openBooleanfalse—
actionsTextNew photo,New note,New list—
accentText#f97316hex colour
inkText#fff7edhex colour
bgText#120c08hex colour

Events: action

More Flutter animations

The same idea in other frameworks: React liquid fill button · SwiftUI hold to confirm button · JavaScript magnetic confetti button