Flutter animation example
Flutter Onboarding Animation: Animated Intro Pager
Onboarding has a few seconds to explain your app. This pager gives each page a simple animated illustration whose shapes morph into the next page's as you swipe, so the three screens feel like one story. The page dots stretch toward the active page and the Next button turns into Get started on the last one.
- 4.5 KB file
- 4 live inputs
- Flutter runtime
How this onboarding pager works
- Page position is continuous during a swipe, and the illustration interpolates shape, size and color by it.
- The active dot's width is 1 - distance, which produces the stretching indicator.
- Finishing the last page fires "finish"; page changes fire "page".
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-onboarding-animation.exode to pubspec.yaml (download it below).
class FlutterOnboardingAnimation extends StatefulWidget {
const FlutterOnboardingAnimation({super.key});
@override
State<FlutterOnboardingAnimation> createState() => _FlutterOnboardingAnimationState();
}
class _FlutterOnboardingAnimationState extends State<FlutterOnboardingAnimation> {
final _canvas = GlobalKey<ExodeUICanvasState>();
late final Future<String> _json = rootBundle.loadString('assets/flutter-onboarding-animation.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: 'page', 'finish'
},
)
: const SizedBox.shrink(),
);
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
titles | Text | Design in motion|Logic without code|Ship to every app | — |
accent | Text | #6366f1 | hex colour |
ink | Text | #1e1b4b | hex colour |
bg | Text | #eef2ff | hex colour |
Events: pagefinish
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.