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
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
| Input | Type | Default | Range |
|---|---|---|---|
prefix | Text | Build apps that | — |
words | Text | feel alive|delight users|ship faster | — |
speed | Number | 1 | 0.3 – 3 |
accent | Text | #facc15 | hex colour |
ink | Text | #fefce8 | hex colour |
bg | Text | #0f0e08 | hex colour |
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.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 scramble text · SwiftUI shimmer reveal text · JavaScript terminal typing effect