Skip to main content

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

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

InputTypeDefaultRange
validBooleantrue—
emailTextada@example.com—
accentText#2563ebhex colour
inkText#0f172ahex colour
bgText#ffffffhex colour

Events: submitsuccesserror

More Flutter animations