Flutter Animated Intervals

In this blog today we are going to see how we can animate an object from the starting point to end divided into a different interval where each interval has its own animating property.

Let's see a broad picture of what we are going to do.

We know our animation starts at 0.0 (starting point) to 1.0 (ending point). We are going to divide this interval into sub-interval where each subinterval will be responsible for animating different attributes of our design.

So as in analogy, we can consider our animation controller as an engine which will drive our animation from starting point to ending point as an engine, the controller has the various aspect of controlling out animation such as (start, stop, reverse, replay, etc).

If you want to know more about his animation you can refer to my previous posts.

So as usual we will start our animation by Creating a Stateful widget, adding a mixin SingleTickerProviderStateMixin and at last, initializing our animation controller.

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {AnimationController _controller;@override
void initState() {
_controller =AnimationController(vsync: this, duration: const Duration(seconds: 2));super.initState();
}
}

and now the important step of disposing of our controller.

@override
void dispose() {
_controller.dispose();
super.dispose();
}

in our widget tree, we need to have a place where our animation can pay and two buttons for forwarding and reversing our animation.

@overrideWidget build(BuildContext context) {return Scaffold(body: Column(children: [Spacer(),Container(margin: EdgeInsets.all(10),width: double.infinity,height: 300,child: PlayGround(controller: _controller,),),Spacer(),Row(children: [RaisedButton(onPressed: () {_controller.forward();},child: Text("Forward"),),Spacer(),RaisedButton(onPressed: () {_controller.reverse();},child: Text("Reverse"),)],)],),);}

Now let's come to our PlayGround Stateless widget

This takes a property controller which is our animation controller.

The following are the Properties to be animated.

final Animation<double> animateWidth;final Animation<double> animateHeight;final Animation<EdgeInsets> animatePadding;final Animation<BorderRadius> animateRadius;final Animation<double> rotationAnimation;final Animation<Color> animateColor;

Every property is initialized by a specific Tween

for padding — EdgeInsetsTween

for animateRadius — BorderRadiusTween

for animateColor — ColorTween

and for rest Tween<double>

But how we are going to define Interval in our animation?

This is the way: animatePadding = EdgeInsetsTween(begin: EdgeInsets.all(0),end: EdgeInsets.only(top: 100.0, left: 10)).animate(CurvedAnimation(parent: controller,curve: Interval(0.2, 0.4, curve: Curves.fastOutSlowIn))),

CurvedAnimation takes 3 arguments.

  1. parent — which is our controller
  2. curve — This takes an Interval with a starting point, ending point, and a Curve which is the behaviour of animating.
  3. reverse curve— reverse behaviour of animating.

So yes, with this we have achieved our animation.

And at last Keep Learning.