Flutter animation example
Flutter Wave Animation: Liquid App Header
A wavy header is a popular way to soften a Flutter app's top section. Instead of a static WaveClipper path, this edge is a simulated string of springs: tap anywhere along it and a splash ripples outward, and the surface tilts gently toward the pointer like water in a glass.
- 4.3 KB file
- 6 live inputs
- Flutter runtime
How this liquid wave header works
- The edge is 40 points connected by springs; each point is pulled toward its neighbours and its rest height.
- Tapping pushes the nearest points down, and the spring network spreads that energy as a ripple.
- A slow idle swell keeps the surface moving when nobody is touching it.
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-wave-animation.exode to pubspec.yaml (download it below).
class FlutterWaveAnimation extends StatefulWidget {
const FlutterWaveAnimation({super.key});
@override
State<FlutterWaveAnimation> createState() => _FlutterWaveAnimationState();
}
class _FlutterWaveAnimationState extends State<FlutterWaveAnimation> {
final _canvas = GlobalKey<ExodeUICanvasState>();
late final Future<String> _json = rootBundle.loadString('assets/flutter-wave-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: 'splash'
},
)
: const SizedBox.shrink(),
);
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
title | Text | Good morning | — |
subtitle | Text | 3 tasks due today | — |
tension | Number | 1 | 0.3 – 2.5 |
accent | Text | #06b6d4 | hex colour |
accent2 | Text | #3b82f6 | hex colour |
bg | Text | #f8fafc | hex colour |
Events: splash
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.