Flutter animation example
Flutter Animated Login: Form With Field and Button Motion
A login screen is all feedback. Tap a field and its underline grows from the centre and its label floats up. The sign-in button collapses into a spinner while it "checks", then either draws a checkmark or shakes the form if the password is wrong. Try submitting with an empty password to see the error state.
- 4.7 KB file
- 5 live inputs
- Flutter runtime
How this animated login form works
- Focus moves a spring-driven underline and floats the label above the field.
- Submitting runs a timeline: width collapse, spinner, then success or a damped horizontal shake.
- The result is chosen by the "valid" input, and "submit" fires so your code can do the real request.
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-login-animation.exode to pubspec.yaml (download it below).
class FlutterLoginAnimation extends StatefulWidget {
const FlutterLoginAnimation({super.key});
@override
State<FlutterLoginAnimation> createState() => _FlutterLoginAnimationState();
}
class _FlutterLoginAnimationState extends State<FlutterLoginAnimation> {
final _canvas = GlobalKey<ExodeUICanvasState>();
late final Future<String> _json = rootBundle.loadString('assets/flutter-login-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: 'submit', 'success', 'error'
},
)
: const SizedBox.shrink(),
);
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
valid | Boolean | true | — |
email | Text | ada@example.com | — |
accent | Text | #2563eb | hex colour |
ink | Text | #0f172a | hex colour |
bg | Text | #ffffff | hex colour |
Events: submitsuccesserror
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.