Skip to main content

Flutter animation example

Flutter Carousel Animation: 3D Coverflow

Coverflow is the carousel that made album browsing fun. Covers to the side turn away at an angle and slide behind each other, the centre one faces you with a reflection underneath, and dragging moves through them with a snap. It is a strong fit for media apps, product galleries and portfolios.

  • 4.5 KB file
  • 4 live inputs
  • Flutter runtime
Live, try it

How this coverflow carousel works

  • Each cover's angle, x position and depth come from its distance to the current index.
  • Covers are drawn back to front by distance, so overlaps are always correct.
  • A reflection is the cover flipped vertically with a fading mask; dragging fires "change" on snap.

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

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

Inputs

InputTypeDefaultRange
titlesTextNeon,Tide,Ember,Moss,Dusk,Frost,Bloom—
accentText#e11d48hex colour
inkText#fff1f2hex colour
bgText#09090bhex colour

Events: change

More Flutter animations

The same idea in other frameworks: React spring card slider