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 intervals 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-intervals where each subinterval will be responsible for animating different attributes of our design.

So in analogy, we can consider our animation controller as an engine that will drive our animation from starting point to the 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.

Fun Animations in Flutter

Fun Animations in Flutter part -2

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.

@override
Widget 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 Intervals 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, an ending point, and a Curve which is the behavior of animating.
3. reverse curve— reverse the behavior of animating.

⭐ Code for Playground 🎯

So yes, with this we have achieved our animation.

And at last Keep Learning.