My Hexaville
Spead the Word
flutter canvas animations

Flutter Canvas Animations


Continuing to learn Flutter, in this post you’re going to learn how to animate Flutter widgets with canvas

AnimationTypes

There’re two types of animation in Flutter: Tween and Physics-based. First one has predefined duration and values, we’re going to use it

Heres an example of a Tween animation

forward function actually starts the animation

Without further ado, here’s what we’re going to create today

flutter canvas animationsflutter canvas animations

Canvas Animations

If you’re not familiar how animations with canvas work, in a nutshell, you have a set of commands to draw shapes, paths (paint function), then you animate values used to draw shapes and every 16.6 milliseconds and call paint function to redraw everything using new values

Static Cross

Let’s draw a cross first without any animations

You can see me wrapping CustomPaint in AspectRatio widget, this is to give CustomPaint a square size, otherwise, it will be zero

Animating Cross

Now the way Flutter canvas animations work is they create a new instance of your CustomPainter implementation class on each frame. Which can’t be the most optimized way, it’s never a great idea to create new objects 60 times per second. But saw several examples using this approach and going to use it till I figure out a better way

The best is to extract a cross shape as a widget

ShouldRepaint function has an argument, it’s an instance of your CustomPainter class from the previous frame. Depending on the value returned from that function, it decides whether to redraw or use the previous bitmap

My if statements inside paint function do this:

  • convert 0.0 – 0.5 to 0.0 – 1.0 for left line fraction
  • convert 0.5 – 1.0 to 0.0 – 1.0 for right line fraction

Animating Circle

This one is much simpler, just going to include a CustomPainter class, because everything else is the same

Conclusion

It’s pretty easy to create custom animations in Flutter if you worked with canvas before in other platforms. You can get the source code here

 


About the Author Ihor Klimov

Formerly an Android developer, lately picked up some Flutter. This blog is everything that I find exciting about Android and Flutter development. Stay tuned and hope to see you again!

follow me on: