animate_do 1.6.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 94

animate_do #

An animation package inspired in Animate.css, built using only Flutter animations, no extra packages.

Getting Started #

This package is simple to use. Every single animation contains default values that look beautiful, but you can change properties to accomplish your needs.

Properties in almost every animated widget: #

PropertyTypeDescription
childWidgetChild Widget to animate
durationDurationAnimation duration
delayDurationDelay before the animation
fromdoubleInitial or final destination, if you want a slide or fade more striking
animatebooleanChange this property from false to true to starts the animation (useful if you use setState, Bloc, Provider, Redux or any other state management system)
infinitebooleanAttention seekers can be run infinitely with this property
spinsdoubleThe number of spins that you want (some animations have this, ex: Spin, Roulette, PerfectSpin )
manualTriggerbooleanif you're going to trigger the animation manually (required the controller property)
controllerFunctionFunction that exposes the controller (for more control of the animation

Available Animations #

FadeIn Animations #

  • FadeIn
  • FadeInDown
  • FadeInDownBig
  • FadeInUp
  • FadeInUpBig
  • FadeInLeft
  • FadeInLeftBig
  • FadeInRight
  • FadeInRightBig

FadeOut Animations #

  • FadeOut
  • FadeOutDown
  • FadeOutDownBig
  • FadeOutUp
  • FadeOutUpBig
  • FadeOutLeft
  • FadeOutLeftBig
  • FadeOutRight
  • FadeOutRightBig

BounceIn Animations #

  • BounceInDown
  • BounceInUp
  • BounceInLeft
  • BounceInRight

ElasticIn Animations #

  • ElasticIn
  • ElasticInDown
  • ElasticInUp
  • ElasticInLeft
  • ElasticInRight

SlideIns Animations #

  • SlideInDown
  • SlideInUp
  • SlideInLeft
  • SlideInRight

FlipIn Animations #

  • FlipInX
  • FlipInY

Zooms #

  • ZoomIn
  • ZoomOut

SpecialIn Animations #

  • JelloIn

Attention Seeker #

All of the following animations could be infinite with a property called infinite (type Bool)

  • Bounce
  • Flash
  • Pulse
  • Swing
  • Spin
  • SpinPerfect
  • Dance
  • Roulette

Example #

home: Scaffold(
    body: Center(

        child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[

            FadeInLeft(child: Square() ),
            FadeInUp(child: Square() ),
            FadeInDown(child: Square() ),
            FadeInRight(child: Square() ),
            
        ],
        ),

    ),
),

Note: Square, is just a Square blue container #

class Square extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
      ),
    );
  }
}

alt text

Manual Trigger #

Since version 1.2.0, there is a way to get the AnimationController easily, so you can restart it, change the duration, do the animation again.

Example

  class FadeOutDownBig extends StatelessWidget/StatefulWidget {
  
  AnimationController animateController;
  ...
  ...
  ...

  child: FadeInUp(
    
    // (optional) if true, will not fire the animation on load
    manualTrigger: true, 

    //(optional, but mandatory if you use manualTrigger:true) This callback exposes the AnimationController used for the selected animation. Then you can call animationController.forward() to trigger the animation wherever you like manually.
    controller: ( controller ) => animateController = controller,

    child: YourWidget(),

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

[1.6.3] - Docs Updated

  • Minor update

[1.6.2] - ZoomIn / ZoomOut

  • Added a from property

[1.6.1] - Infinite animations can be stopped

  • Now Attention Seekers can be stopped (even if they are in infinite mode). You just have to set the animate property from true to false
  • You can use setState, Provider, Bloc, Redux to achieve that
  • Delay bug fix with animate property

[1.5.1] - Description updated

  • Description updated

[1.5.0] - Big step forward

  • Readme updaded
  • New animations
    • ZoomIn
    • Zoomout
    • FadeOut
    • FadeOutDown
    • FadeOutDownBig
    • FadeOutUp
    • FadeOutUpBig
    • FadeOutLeft
    • FadeOutLeftBig
    • FadeOutRight
    • FadeOutRightBig
  • New properties added
    • from
    • animate
    • spins
  • Smaller package size
  • Smoother animations
  • More customization

[1.2.1] - Readme updated

  • Readme updated

[1.2.0] - Manual Trigger Added

  • Manual Trigger added
    • (optional) bool manualTrigger
      • This option will not fire the animation on load. Forces you to provide the controller callback
    • (optional but mandatory if you use manualTrigger) Function controller
      • This callback, will give you access to the animationController from the selected animation. See the example at the end of this documentation.
  • Minor fixes

[1.0.0] - Release

  • Retouched all the animations
  • Better FadeIns
  • New animations added
    • JelloIn
    • FlipInX
    • FlipInY
    • Spin
    • SpinPerfect
    • Dance
    • Roulette
  • Documentation updated

[0.2.0] - Delay implemented

  • Implemented delay inside all animated widgets
  • Big stability improvements
  • Documentation updated

[0.1.5] - Small optimizations

  • Readme updated
  • Formatted the main file

[0.1.4] - New animations added

  • Added the following animations
    • Swing
    • ElasticIn
    • ElasticInDown
    • ElasticInUp
    • ElasticInLeft
    • ElasticInRight

[0.1.3] - Example added

Fixing some Kotlin dependencies

[0.1.2] - Example added

You can find a simple demo in the "example" folder

[0.1.1] - Clean format

Just clean the animate_do main file

[0.1.0] - Basic functionality.

Production ready, but I want to add more features soon

  • Added the following animations
    • FadeIn
    • FadeInDown
    • FadeInDownBig
    • FadeInUp
    • FadeInUpBig
    • FadeInLeft
    • FadeInLeftBig
    • FadeInRight
    • FadeInRightBig
    • BounceInDown
    • BounceInUp
    • BounceInLeft
    • BounceInRight
    • Bounce ( it could be infinite with a property)
    • Flash ( it could be infinite with a property)
    • Pulse ( it could be infinite with a property)

example/main.dart

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

void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        body: Center(
          child: BounceInDown(
            child: Square()
          )
        ),
      ),
    );
  }
}

class Square extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  animate_do: ^1.6.3

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:animate_do/animate_do.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
87
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]
94
Learn more about scoring.

We analyzed this package on Mar 31, 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

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test