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
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
| Input | Type | Default | Range |
|---|---|---|---|
open | Boolean | false | — |
actions | Text | New photo,New note,New list | — |
accent | Text | #f97316 | hex colour |
ink | Text | #fff7ed | hex colour |
bg | Text | #120c08 | hex colour |
Events: action
More Flutter animations
Bouncing Bars LoaderFive bars bouncing in a travelling wave with squash and stretch, plus rotating status messages.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.Onboarding PagerThree swipeable intro pages with morphing illustrations, a stretching dot indicator and a finishing button.
The same idea in other frameworks: React liquid fill button · SwiftUI hold to confirm button · JavaScript magnetic confetti button