Flutter animation example
Flutter Parallax: Scrolling List With Image Parallax
Parallax inside a scrolling list makes each card feel like a window onto a bigger picture. As the list scrolls, the image inside every card moves at a fraction of the scroll speed, so it shifts within its frame. Drag the list and let go to see momentum carry it, then a gentle bounce at the ends.
- 4.4 KB file
- 5 live inputs
- Flutter runtime
How this parallax scroll list works
- Each image is offset by (card centre - viewport centre) × the parallax factor, clipped to its card.
- Dragging tracks the pointer; on release the list keeps the flick velocity and decays it with friction.
- At the ends the list overscrolls and springs back, like iOS bouncing scroll physics.
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-parallax.exode to pubspec.yaml (download it below).
class FlutterParallax extends StatefulWidget {
const FlutterParallax({super.key});
@override
State<FlutterParallax> createState() => _FlutterParallaxState();
}
class _FlutterParallaxState extends State<FlutterParallax> {
final _canvas = GlobalKey<ExodeUICanvasState>();
late final Future<String> _json = rootBundle.loadString('assets/flutter-parallax.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 |
|---|---|---|---|
factor | Number | 0.35 | 0 – 0.8 |
titles | Text | Patagonia,Iceland,Namibia,Lofoten,Atacama,Dolomites | — |
accent | Text | #0ea5e9 | hex colour |
ink | Text | #ffffff | hex colour |
bg | Text | #020617 | 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.Wavy TypewriterA typewriter whose letters drop in with a bounce; words type, hold, delete and cycle.Onboarding PagerThree swipeable intro pages with morphing illustrations, a stretching dot indicator and a finishing button.
The same idea in other frameworks: React depth parallax scene · SwiftUI tilt parallax poster · JavaScript scroll reveal timeline