flutter_animation_sequencer 1.0.1

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

flutter_animation_sequencer

A declarative, chainable animation timeline for Flutter. Sequence, stagger, group, and reverse complex multi-widget animations without manually managing multiple AnimationControllers.

Think of it as a Rive-like timeline control written in pure Dart/Flutter.

Features

• Chainable API: Define animations using a clean, readable syntax.
• Auto-managed Controllers: No need to worry about AnimationController lifecycles.
• Built-in Steps: Support for Fade, Slide, Scale, Rotate, and Color animations.
• Sequencing Modes: Run steps sequentially, in parallel (group), or staggered.
• Playback Control: Play, pause, stop, reset, and reverse animations programmatically.
• Auto-Dispose: Easy integration with SequencerStateMixin.

Installation

Add flutter_animation_sequencer to your pubspec.yaml:

dependencies:
  flutter_animation_sequencer: ^1.0.0

Quick Start

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

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin, SequencerStateMixin {
  @override
  AnimationSequence get sequence => AnimationSequence()
    .then(FadeStep(from: 0, to: 1, duration: Duration(milliseconds: 400)))
    .then(SlideStep(from: Offset(0, 50), to: Offset.zero, duration: Duration(milliseconds: 300)));

  @override
  Widget build(BuildContext context) {
    return AnimationSequencer(
      controller: sequencer,
      sequence: sequence,
      builder: (context, animatedValues) => Opacity(
        opacity: animatedValues.opacity,
        child: Transform.translate(
          offset: animatedValues.offset,
          child: Container(width: 100, height: 100, color: Colors.blue),
        ),
      ),
    );
  }
}

Usage

Basic Chaining with then()

Run animations one after another.

AnimationSequence()
  .then(FadeStep(from: 0, to: 1, duration: Duration(milliseconds: 400)))
  .then(ScaleStep(from: 0.5, to: 1, duration: Duration(milliseconds: 300)))

Staggered Animations with thenStagger()

Animate multiple properties or widgets with a delay between them.

AnimationSequence()
  .thenStagger([
    ScaleStep(from: 0.8, to: 1.0, duration: Duration(milliseconds: 200)),
    FadeStep(from: 0.5, to: 1.0, duration: Duration(milliseconds: 200)),
  ], staggerDelay: Duration(milliseconds: 80))

Parallel Animations with thenGroup()

Run multiple animations simultaneously.

AnimationSequence()
  .thenGroup([
    RotateStep(fromRadians: 0, toRadians: 3.14, duration: Duration(milliseconds: 500)),
    FadeStep(from: 1, to: 0.5, duration: Duration(milliseconds: 500)),
  ])

Playback Control

Use SequencerController to control the animation.

sequencer.play();
sequencer.pause();
sequencer.stop();
sequencer.reset();
sequencer.reverse();

Available Step Types

Step Type	Properties
FadeStep	from, to, duration, delay, curve
SlideStep	from, to, duration, delay, curve
ScaleStep	from, to, duration, delay, curve
RotateStep	fromRadians, toRadians, duration, delay, curve
ColorStep	from, to, duration, delay, curve
WaitStep	duration

License

MIT License. See LICENSE for details.

Author

George Ikwegbu