Bring Animated Experience in Your Flutter Apps- Flutter Fest @ GeekyAnts

Introduction

The talk takes us through different kinds of animation and shows us a flowchart to help us choose the right animation tool from Flutter with code.

Animation is the process of photographing successive events of some images. When the images are lined up in succession the eyes perceive them as movement. The animation that is presented on the screen is therefore an image updating itself in 16 milliseconds. While coding for animation, we need to remember that the frames are the most essential aspect of a video

Implicit and Explicit Animation

While working on a simple animation with simple properties, we always select implicit animation. Take a look at a simple animation of a shape that changes size, using the numerous widgets provided by Flutter. Roughly five to ten lines of coding make for the architecture of this simple animation. 

Now consider an animation that is rotating on the screen and simultaneously increasing in size, with the background color changing. Here the color is changing its value in 16 milliseconds. While working on this form of multiple animation with complex properties, we select explicit animaton.  

Selecting the Right Animating Tool from Flutter

A flow chart helps us understand how to select the right animating tool from Flutter, depending on the type and complexity of your design or text. In order to animate text style, we use AnimatedDefaultTextStyle. For explicit animations, we use CustomPainter to build complex UI. Lottie is a drawing animation that provides the animation that you just have to run- no building needed. 

Flutter animation can be used to build slides and presentations, by running a Flutter web project which does all the animation. 

Source Codes

First, we take a look at the implicit animation code. For implicit animation, all the widgets are present in Flutter. In the code for implicit animation, we state the duration and then select the AnimatedContainer. We can change the two variables height and width to increase or decrease the size of the animation. This is a very simple implicit animation, where we need to update the values, and Flutter widgets will take care of all the animations. For instance, we can increase the height to 200 and setState. AnimatedContainer will take care of everything.

Next, we take a look at the code for explicit animation. In explicit animation, controlling different elements is essential. For this, we have:

• TickerProviderStateMixin — this gives you a clock with 16 milliseconds, you can increase this time if required. It gives you a timer and asks when you want to update your screen.

• AnimationController — this helps you to control your animation- you can go forwards and backward, start and stop.

• Animation — this tells you what your animation will look like.

We just need to initialize these variables and then use them.

Let’s look at the code for an explicit animation with logoController, which is an animation controller. The controller has been initiated with a time which is for 20000 milliseconds, or 20 seconds. logoTween, which is an animation, has also been initiated. You can control the animation, forward and backward movement, start and stop the animation using the controller. The animation logoTween gives you a value after the ticker time. Select your values for height and width based on your animation scheme, and setState to update your screen.

Note: An important thing to remember for beginners who are starting with animation work is animation choreography, which enables you to do animation based on steps. For instance, the confetti animation shown in the presentation has some choreography, according to which it makes its movements.

Conclusion

Animation in Flutter supports lots of things, from simple to complex animations, from text to drawing-based animation, which can be run using Flutter. For individuals attempting to create fun, complex animations using Flutter, this talk provides a fresh perspective and some context to get started.

At GeekyAnts, we are always keen on experimenting and keeping up with all the upcoming and latest innovations related to Flutter. To know more about animations using Flutter and their uses for your company, book an appointment with us today!