flutter_sequence_animation 3.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 86

flutter_sequence_animation #

- No need to use intervals and calculate percentages for your total animation time. #

- Animate the same variable with multiple animatables! #

- You only need one AnimationController #

- Intuitive and easy to use interface #

Installation #

This PR introduced breaking changes to the animation API. If your are above that version use

  flutter_sequence_animation: "^3.0.0"


  flutter_sequence_animation: "^2.0.0"


$ flutter packages get


import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';

Demo #

alt-text-1 alt-text-1alt-text-1

Code #

The Staggered Animation example from here is 207 lines of code . The same animation with this package is 128 lines of code. It is also much easier to read and edit.

You specify a sequence of animatables like this:

    sequenceAnimation = new SequenceAnimationBuilder()
          animatable: new ColorTween(begin: Colors.red, end: Colors.yellow),
          from:  const Duration(seconds: 0),
          to: const Duration(seconds: 2),
          tag: "color"
          animatable: new ColorTween(begin: Colors.yellow, end: Colors.blueAccent),
          from:  const Duration(seconds: 2),
          to: const Duration(seconds: 4),
          tag: "color",
          curve: Curves.easeOut
          animatable: new ColorTween(begin: Colors.blueAccent, end: Colors.pink),
          //  animatable: new Tween<double>(begin: 200.0, end: 40.0),
          from:  const Duration(seconds: 5),
          to: const Duration(seconds: 6),
          tag: "color",
          curve: Curves.fastOutSlowIn

In this case only the color is animated but you can add as many different properties to the sequence as you'd like to. The only restriction is that animations with the same tag can not overlap and need to be ordered.

Now you can access the resulting animation from anywhere in your code with


This animation is a composition of all animatables you passed in with the same tag.

Example usage of this example:

new AnimatedBuilder(
          builder: (context, child) {
            return new Center(
              child: new Container(
                color: sequenceAnimation["color"].value,
                height: 200.0,
                width: 200.0,
          animation: controller,

The animation duration is set automatically (don't change the duration of the controller yourself).

Sepcial thanks to Simon Lightfoot for the help! #

Getting Started #

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

[1.0.1] - Initial release #

  • First fully working implementation of the sequence animation.

[2.0.0] - Breaking change - refactored a few variables. #

  • Breaking change - refactored a few variable. Most importantly anim -> animatable in the builder
  • To prevent code breaking version got bumped to 2.0.0
  • Thanks to Jeroen Meijer for the PR!

[2.0.0] - Breaking change - animation API changed. #

  • To prevent code breaking version got bumped to 3.0.0
  • Thanks to MaximilianKlein for the PR!


import 'package:flutter/material.dart';

import 'same_variable_multiple_animations.dart';
import 'sequence_page.dart';
import 'staggered_animation_replication.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      home: new HomePage(),
      routes: {
        'sequence': (_)=> new SequencePage(),
        'StaggeredAnimationReplication': (_)=> new StaggeredAnimationReplication(),
        'SameVariableAnimationPage': (_)=> new SameVariableAnimationPage(),

class HomePage extends StatefulWidget {
  _HomePageState createState() => new _HomePageState();

class _HomePageState extends State<HomePage> {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Examples"),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(onPressed: (){Navigator.pushNamed(context, 'sequence');}, child: new Text("Sequence"),),
            new RaisedButton(onPressed: (){Navigator.pushNamed(context, 'StaggeredAnimationReplication');}, child: new Text("StaggeredAnimationReplication"),),
            new RaisedButton(onPressed: (){Navigator.pushNamed(context, 'SameVariableAnimationPage');}, child: new Text("SameVariableAnimationPage"),),

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flutter_sequence_animation: ^3.0.1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Apr 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Maintenance suggestions

Package is getting outdated. (-50.14 points)

The package was last published 78 weeks ago.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
meta ^1.1.2 1.1.8
Transitive dependencies
collection 1.14.11 1.14.12
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies