flutter_animation_sequencer 1.0.0

A declarative, chainable animation timeline for Flutter that allows developers to sequence, stagger, group, and reverse complex multi-widget animations.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_animation_sequencer/flutter_animation_sequencer.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animation Sequencer Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DemoScreen(),
    );
  }
}

class DemoScreen extends StatefulWidget {
  const DemoScreen({super.key});

  @override
  State<DemoScreen> createState() => _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen>
    with TickerProviderStateMixin, SequencerStateMixin {
  @override
  AnimationSequence get sequence => AnimationSequence()
      // 1. Initial Fade In and Scale Up
      .thenGroup([
        const FadeStep(from: 0, to: 1, duration: Duration(milliseconds: 600)),
        const ScaleStep(
            from: 0.5, to: 1.2, duration: Duration(milliseconds: 600)),
      ])
      // 2. Overshoot back to normal scale
      .then(const ScaleStep(
          from: 1.2, to: 1.0, duration: Duration(milliseconds: 200)))
      // 3. Wait a bit
      .thenWait(const Duration(milliseconds: 200))
      // 4. Slide to the right and Rotate
      .thenGroup([
        const SlideStep(
          from: Offset.zero,
          to: Offset(100, 0),
          duration: Duration(milliseconds: 500),
        ),
        const RotateStep(
          fromRadians: 0,
          toRadians: 3.14159,
          duration: Duration(milliseconds: 500),
        ),
      ])
      // 5. Staggered return and color change
      .thenStagger([
        const SlideStep(
          from: Offset(100, 0),
          to: Offset.zero,
          duration: Duration(milliseconds: 400),
        ),
        const RotateStep(
          fromRadians: 3.14159,
          toRadians: 0,
          duration: Duration(milliseconds: 400),
        ),
        const ColorStep(
          from: Colors.blue,
          to: Colors.deepPurple,
          duration: Duration(milliseconds: 400),
        ),
      ], staggerDelay: const Duration(milliseconds: 100));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Animation Sequencer')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimationSequencer(
              controller: sequencer,
              sequence: sequence,
              builder: (context, values) {
                return Transform.translate(
                  offset: values.offset,
                  child: Transform.rotate(
                    angle: values.rotation,
                    child: Transform.scale(
                      scale: values.scale,
                      child: Opacity(
                        opacity: values.opacity,
                        child: Container(
                          width: 150,
                          height: 150,
                          decoration: BoxDecoration(
                            color: values.color ?? Colors.blue,
                            borderRadius: BorderRadius.circular(20),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.2),
                                blurRadius: 10,
                                spreadRadius: 2,
                              ),
                            ],
                          ),
                          child: const Center(
                            child: Icon(
                              Icons.auto_awesome,
                              color: Colors.white,
                              size: 50,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
            const SizedBox(height: 100),
            Wrap(
              spacing: 10,
              children: [
                ElevatedButton(
                  onPressed: () => sequencer.play(),
                  child: const Text('Play'),
                ),
                ElevatedButton(
                  onPressed: () => sequencer.reverse(),
                  child: const Text('Reverse'),
                ),
                ElevatedButton(
                  onPressed: () => sequencer.pause(),
                  child: const Text('Pause'),
                ),
                ElevatedButton(
                  onPressed: () => sequencer.stop(),
                  child: const Text('Stop'),
                ),
                ElevatedButton(
                  onPressed: () => sequencer.reset(),
                  child: const Text('Reset'),
                ),
              ],
            ),
            const SizedBox(height: 20),
            StreamBuilder<SequencerState>(
              stream: sequencer.stateStream,
              initialData: sequencer.state,
              builder: (context, snapshot) {
                return Text(
                  'State: ${snapshot.data?.name}',
                  style: Theme.of(context).textTheme.headlineSmall,
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}