flutter_sequence_animation 1.0.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new50

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

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()
      .addAnimatable(
          anim: new ColorTween(begin: Colors.red, end: Colors.yellow),
          from:  const Duration(seconds: 0),
          to: const Duration(seconds: 2),
          tag: "color"
        ).addAnimatable(
          anim: new ColorTween(begin: Colors.yellow, end: Colors.blueAccent),
          from:  const Duration(seconds: 2),
          to: const Duration(seconds: 4),
          tag: "color",
          curve: Curves.easeOut
        ).addAnimatable(
          anim: new ColorTween(begin: Colors.blueAccent, end: Colors.pink),
          //  anim: new Tween<double>(begin: 200.0, end: 40.0),
          from:  const Duration(seconds: 5),
          to: const Duration(seconds: 6),
          tag: "color",
          curve: Curves.fastOutSlowIn
        ).animate(controller);

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

sequenceAnimation["color"]

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).

Getting Started

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

For help on editing package code, view the documentation.

[0.0.1] - TODO: Add release date.

  • TODO: Describe initial release.

example/lib/main.dart

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 {
  @override
  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 {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  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:


dependencies:
  flutter_sequence_animation: "^1.0.1"

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages 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';
  
Version Uploaded Documentation Archive
1.0.1 Jun 9, 2018 Go to the documentation of flutter_sequence_animation 1.0.1 Download flutter_sequence_animation 1.0.1 archive
1.0.0 Jun 9, 2018 Go to the documentation of flutter_sequence_animation 1.0.0 Download flutter_sequence_animation 1.0.0 archive

Analysis

We analyzed this package on Jun 19, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3
  • Flutter: 0.5.4

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
0 / 100
Health:
Code health derived from static analysis. [more]
99 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
50
Learn more about scoring.

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

    Run flutter format to format lib/flutter_sequence_animation.dart.

Dependencies

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.5
Transitive dependencies
collection 1.14.6 1.14.10
sky_engine 0.0.99
typed_data 1.1.5
vector_math 2.0.6 2.0.7
Dev dependencies
flutter_test