sa_anicoto 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 99

This project is part of the Simple Animations Framework

🎥 Anicoto #

Anicoto (AnimationController toolkit) enriches your developing expierience with Flutter's AnimationController.

🌞 Highlights #

  • Configure animation in stateful widgets within seconds
  • Simplified AnimationController handling

⛏ Usage #

🛈 The following code snippets use supercharged for syntactic sugar.

Getting started #

Add Simple Animations to your project by following the instructions on the install page.

To learn how to use Anicoto:

Basic usage pattern #

Overview

Configuring animation support is three simple steps:

  • Add the AnimationMixin to the state class of your stateful widget
  • Declare Animation<?> class variables for each animated property and use them in your build() {...} method
  • Create an initState() {...} method and connect tweens with the controller by calling tween.animatedBy(controller). Store that result into your Animation<?> variable. Finally start the animation with controller.play().
class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {  // Add AnimationMixin to state class

  Animation<double> size; // Declare animation variable

  @override
  void initState() {
    size = 0.0.tweenTo(200.0).animatedBy(controller); // Connect tween and controller and apply to animation variable
    controller.play(); // Start the animation playback
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.value, // Use animation variable's value here 
      height: size.value, // Use animation variable's value here
      color: Colors.red
    );
  }
}

💪 Note: The AnimationMixin generates a preconfigured AnimationController as controller. You can just use it. No need to worry about initialization or disposing.

The three steps in more detail

Creating own animations with an AnimationController requires state changing. For that you first create a stateful widget that contains the content you want to animate.

Start by adding with AnimationMixin to your state class.

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin { // <-- add AnimationMixin to your state class

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100.0, // <-- value to animate
      height: 100.0, // <-- value to animate
      color: Colors.red
    );
  }
}

This snippet wants to animate a red square. For that we identified width and height to be the animated property "size".

Next we substitute the fixed values for our "size" with a declared Animation<double> class variable.

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {

  Animation<double> size; // <-- Animation variable for "size"
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.value, // <-- use the animated value for "size"
      height: size.value, // <-- use the animated value for "size"
      color: Colors.red
    );
  }
}

The final step is to add an initState() { ... } method. In this method we connect tweens ("the movie script of our animation") with our AnimationController ("the movie director"). Then we can start the animation by calling controller.play().

@override
void initState() {
  size = 0.0.tweenTo(200.0).animatedBy(controller); // <-- connect tween with controller
  controller.play(); // <-- start animation playback
  super.initState(); 
}

You can find the complete code on top of the example page.

Shortcuts for AnimationController #

Anicoto enriches the AnimationController with four convenience functions:

  • controller.play() plays animation and stops at the end.

  • controller.playReverse() plays animation reversed and stops at the start.

  • controller.loop() repeatly plays the animation from start to the end.

  • controller.mirror() repeatly plays the animation forward, then backwards, then forward and so on.

Each of these methods take an optional duration named parameter to configure your animation action within one line of code.

controller.play(duration: 1500.milliseconds);
controller.playReverse(duration: 1500.milliseconds);
controller.loop(duration: 1500.milliseconds);
controller.mirror(duration: 1500.milliseconds);

You can use these methods nicely along the already existing controller.stop() and controller.reset() methods.

Create multiple AnimationController #

With multiple AnimationController you can have many parallel animations at the same time.

Anicoto's AnimationMixin enhances your state class with a method createController() to create multiple managed* AnimationController. ("Managed" means that you don't need to care about initialization and disposing.)

Create a managed AnimationController

First create a class variable of type AnimationController. Then inside the initState() {...} method call createController(). That's all.

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin { // <-- use AnimationMixin
  
  AnimationController sizeController; // <-- declare custom AnimationController
  Animation<double> size;

  @override
  void initState() {
    sizeController = createController(); // <-- create custom AnimationController
    size = 0.0.tweenTo(100.0).animatedBy(sizeController); // <-- animate "size" with custom AnimationController
    sizeController.play(duration: 5.seconds); // <-- start playback on custom AnimationController
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(width: size.value, height: size.value, color: Colors.red);
  }
}

Create many managed AnimationController

Anicoto allows you to have as many AnimationController you want. Behind the scenes it keeps track of them.

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {
  AnimationController widthController;
  AnimationController heightController;
  AnimationController colorController;

  Animation<double> width;
  Animation<double> height;
  Animation<Color> color;

  @override
  void initState() {
    widthController = createController()..mirror(duration: 5.seconds);
    heightController = createController()..mirror(duration: 3.seconds);
    colorController = createController()..mirror(duration: 1500.milliseconds);

    width = 100.0.tweenTo(200.0).animatedBy(widthController);
    height = 100.0.tweenTo(200.0).animatedBy(heightController);
    color = Colors.red.tweenTo(Colors.blue).animatedBy(colorController);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: width.value, height: height.value, color: color.value);
  }
}

Isn't it insanely simple? It's Simple Animations!

1.0.2 #

  • Update: upgraded to pedantic rule set 1.9.0

1.0.1 #

  • Update: dependencies
  • Update: enforce stricter type rules

1.0.0 #

  • New: AnimationMixin
  • New: AnimationController extensions

example/example.md

📝 Examples #

🛈 Note: These examples uses supercharged for syntactic sugar.

Basic usage pattern #

This example shows a complete app that uses AnimationMixin in a simple way.

example1

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged/supercharged.dart';

void main() => runApp(MaterialApp(home: Page()));

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: Center(child: MyAnimatedWidget())),
    );
  }
}

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

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {  // Add AnimationMixin to state class

  Animation<double> size; // Declare animation variable

  @override
  void initState() {
    size = 0.0.tweenTo(200.0).animatedBy(controller); // Connect tween and controller and apply to animation variable
    controller.play(); // Start the animation playback
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.value, // Use animation variable's value here 
      height: size.value, // Use animation variable's value here
      color: Colors.red
    );
  }
}

Multiple AnimationController instances #

This example uses 3 unique AnimationController instances to animate width, height and color independently.

example1

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged/supercharged.dart';

void main() => runApp(MaterialApp(home: Page()));

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: Center(child: MyAnimatedWidget())),
    );
  }
}

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

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {
  AnimationController widthController; // <-- declare AnimationController
  AnimationController heightController; // <-- declare AnimationController
  AnimationController colorController; // <-- declare AnimationController

  Animation<double> width; // <-- declare Animation variable
  Animation<double> height; // <-- declare Animation variable
  Animation<Color> color; // <-- declare Animation variable

  @override
  void initState() {
    widthController = createController()..mirror(duration: 5.seconds); // <-- create controller instance and let it mirror animate
    heightController = createController()..mirror(duration: 3.seconds); // <-- create controller instance and let it mirror animate
    colorController = createController()..mirror(duration: 1500.milliseconds); // <-- create controller instance and let it mirror animate

    width = 100.0.tweenTo(200.0).animatedBy(widthController); // <-- connect tween with individual controller
    height = 100.0.tweenTo(200.0).animatedBy(heightController); // <-- connect tween with individual controller
    color = Colors.red.tweenTo(Colors.blue).animatedBy(colorController); // <-- connect tween with individual controller

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: width.value, height: height.value, color: color.value); // <-- use animated values
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  sa_anicoto: ^1.0.2

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:sa_anicoto/sa_anicoto.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
98
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
99
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • sa_anicoto that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
supercharged ^1.4.0 1.6.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test
pedantic ^1.9.0