Skip to main content

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

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

InputTypeDefaultRange
titleTextGood morning—
subtitleText3 tasks due today—
tensionNumber10.3 – 2.5
accentText#06b6d4hex colour
accent2Text#3b82f6hex colour
bgText#f8fafchex colour

Events: splash

More Flutter animations