How To Animate 🎞 Flutter Widget From Scratch

Here is another reference, on how to animate a widget in Flutter. besides, Flutter is a hybrid app development framework that enables you to create a complex animation that runs constantly at 60 fps (Frame per second).

Creating the Widget for Animation

Flutter framework expects us to follow a functional and reactive approach into coding, therefore, to implement an animation using widget we require to update its state repeatedly, at real-timed intervals. however, to create a widget that eases to animate we start by creating a class that extends the StatefulWidget class and overriding its createState() method, additionally be sure to return State instance.

To animate the state object we need to associate the state widget and extend the State class we must also use a SingleTickerProviderStateMixin, mixin provides use Ticker object which repeatedly generates callbacks conventionally known as ticks it is because the ticks are generated frequently at uniform intervals of time, however we can use them to determine when the individual frames of our animation are rendered.

Creating the Tween Animation

The Flutter Tween animation of the easiest we can create all you need to do is to provide two different values the starting value and the ending value that start from easing value to ease ending value constantly applying those values to the property of the widget to animate properly.
by creating a simple tween animation that moves a widget from the top to the right corner of the screen and from the left corner, by creating a control we need to use the Animation object and and the AnimationController object then add them as a member variable of our state.

We must initialize the objects by overriding our initState() method of the class, inside the method, we need to request the constructor of the AnimationController class to initialize our controller. Considering to use the TickerProvider object as one of its inputs because of the state is already using the SingleTickerProviderStateMixin. Additionally, we can use the duration property to define the duration of our animation.

We can create a Tween object to specify the beginning and ending values of our animation.

To peer the Tween object with the AnimationController object, we need to call its animate() method then return the value of the method of the Animation object which is we can store in the second member variable of our class.

Our animation object generates an animation event for every tick, which is we need to handle for our animation to work, however, we can use its addListener() method. Additionally, inside the event handler, we must call the setState() method to update the state of our widget and draw it.

Please do note that we don’t need to write the code inside the setState() method unless we have another state variable s to update, to start the animation we must call the forward() method of the animation controller, see below code.

Our animation is ready, however, we still haven’t implemented to any widget that will use to our screen, perhaps we need to position the widget containing a Material icon widget. to accomplish this simply set the value of its left property to the value property of our animation object. below code will override the build() method to the state.

Handling Animation Status Events

To be notified if our animation has been ended, we can attach an object called AnimationStatusListener to the Animation object that will be placed inside the listener, if our current animation is completed or dismissed we can be sure of our animation has been ended.

The tween animation is reversible, the reason why is two different status constants are implying the end of our animation, however, if the current status is completed, it means that our animation has been ended at the end value of our tween. if is dismissed it means that our animation has been ended at the start value. additionally using the two statuses and the forward() and reverse() methods we can easily create it in between animations. The below code shows a reverse and repeat animation we created.

Working on Animated Widgets

The flutter framework provides a ready integrated animated widget we can use to work with animation, additionally, the code is less verbose and more reusable. all class is subclasses of the AnimatedWidget class, AnimationController objects in their corresponding constructors. The most regularly use in widgets is the RotationTransition widget, which enables us to immediately apply to the rotation animation to its children. However, if you want to use the RotationTransistion see below code.

To begin an animated widget, instead of using forward() method, just use repeat() method meaning to animate your animation recurs endlessly.

To make it simple we can use Text Widgets as a child of the RationTransition widget. While creating a RotationTransition widget, we make sure that the value of its turn property to the AnimationController object we just created. additionally, we can also place both widgets inside of the Center widget.

As you can see in the code above we’ve used a Text as the content of the text widget, you see a similar as a RotationTransition widget compare to ScaleTransition widget, it will allow us to animate the scale to its children. however, if you want to recreate we need to pass the AnimationController object to the scale property, see below the following code.

You will notice the Text widget scale change during the animations. however, why we did not create a Tween objects to the animation,  by default the AnimationController class is using 0.0 and 1.0 at the beginning and ending values.

Working with Curves

This is another type of animation from Flutter it is called curve. Flutter has a class called CurvedAnimation, which allows us to implement a non-linear curve to the tweens, working with tweens with Curves class it offers a family of curves such as easeIn, & easeOut that can give our animations more natural and smooth. Creating a curvedAnimation object, we will need an AnimationController object as a parent. you can also use the code for the controller that we created earlier. however, below code example to animate within 8 seconds using CurvedAnimation object and the property will be set to bounceOut curve.

Let’s try now to build a Tween object using the CurvedAnimation object by requesting the animate() method. Additionally when the animation is ready, then add a listener to the animation, to update the state then call the forward() method to start the animation, we can now create an object using CurvedAnimation object by requesting the animate() method.

As you can see the output, we will try to change the Positioned widget property by placing it at the top property. free to extend any child inside of our widget.

Sometimes the animation quite slow and laggy, the best way to simulate the animation is by using an external test device to experience how the animation works on a real device. fo more readings related to the flutter animations, please refer to the official documentation located here.

Leave a Reply

Your email address will not be published. Required fields are marked *