Skip to main content

Flutter animation example

Flutter Text Animation: Wavy Typewriter Effect

Typewriter text is a staple of onboarding screens and hero sections. Here each new letter drops in from above with a small bounce instead of just appearing, a caret blinks at the end, and after a pause the word is deleted backwards and the next one types in. The prefix stays put, so it reads like a sentence.

  • 4.2 KB file
  • 6 live inputs
  • Flutter runtime
Live, try it

How this wavy typewriter works

  • Each letter has its own birth time; its y offset is a bounce curve over its first 300 ms.
  • Type, hold and delete phases are timed from the speed input, so slow and fast feel equally even.
  • Words come from a "|" separated input and loop forever.

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

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

Inputs

InputTypeDefaultRange
prefixTextBuild apps that—
wordsTextfeel alive|delight users|ship faster—
speedNumber10.3 – 3
accentText#facc15hex colour
inkText#fefce8hex colour
bgText#0f0e08hex colour

More Flutter animations

The same idea in other frameworks: React scramble text · SwiftUI shimmer reveal text · JavaScript terminal typing effect