Flutter animation with Canvas

Hi, my name is Andrey, I am a Flutter developer. As I studied Flutter, I often worked with animations. In fact, for animation enthusiasts, flutter is a very good solution, since most of the solutions are already implemented. For example, with the AnimatedOpacity widget, you can make downscaling or transparency animations in a couple of clicks. And if you play a bit over a parameter, you can also create a curve along which this animation will take place.

Also, for those who are just beginning to learn the animation in flutter, I recommend that you read the AnimatedContainer widget. To create simple and simple animations, it will be very useful and easy to use. In short, it has almost the same parameters as a regular Container, but adds animation to the parameters you change.

However, there are situations where we want more than just a Container widget changing parameters. To do this, we can consider two other approaches to creating animations.

  • The creation of animations with Animation and AnimationController.
  • Animation creation with Tween.

We will not dwell on them during this article. Rather, we will discuss their comparison and examples of their use in the next article. However, to create an example, we will touch upon the first approach.

By learning how to work with the 2 approaches described above, we will be able to do a lot, but sometimes we may need to go even further. With the animation, we can only modify an existing widget. What if we want to change a widget that we drew ourselves with CustomPaint? This is the situation we will discuss in this article.

For example, let’s imagine that we need to make our own animated “Play” button for our video player. The first option, the solution to this problem, is to use the standard Flutter widget, AnimatedIcon.

This is the easiest and fastest option. However, it has many disadvantages:

  • Very small selection of icons;
  • It’s hard to edit;
  • It does not give complete freedom in creating animations.

Second option: Using the package animate_icons (https://pub.dev/packages/animate_icons), this package gives us the ability to animate any icons. We won’t dwell on it in detail because I think it’s too unfinished at the moment. Let’s just stop at a small example.

However, the full freedom of action in creating animations can be obtained by using Canvas. This method has disadvantages in that it is a more difficult process.

So, first we need to create a CustomIconPaint class that extends from CustomPainter.

We will pass several parameters into it so that we can change it from the outside. Let’s go through the parameters quickly. The value parameter is the variable parameter that will be responsible for our animation. SizeIcon is responsible for the size of the icon. color and strokeColor, are responsible for color and stroke.

The next step is to create brushes.

We will create 2 brushes:

  • This will be used for filling;
  • Will be used to create a path.

To create a dynamically changing path, we use this line.

strokeWidth = sizeIcon /10. In case we don’t transfer the color, Colors.black will be supplied.

Now we’re all set, to create an icon, first we need to create a private function and pass all the necessary parameters.

To use canvas, we have to write canvas.save() first;.

To write, we will use the Path class and its addPolygon function.

So first, we need to draw one of our icon positions by points.

The result is the following.

At the moment, it is in a horizontal position, because it is easier for me to draw, and in the future we will add a rotation of the icon, and from that position it will be easier to do. In order not to repeat the same code, I put sizeIcon / 8, in the space variable, this variable is responsible for the indent between the rectangles, which is ⅛ of the icon size. At the very end we draw the result twice, first the contour then the fill itself.

And so on, we have to create the animation for the transition from one icon state to another. For this we have the value parameter. When the animation starts the parameter value = 0 and at the end value = 1. Specifically how value works, and where it is taken, we will now consider. To do this, we need to create a wrapper widget over our canvas.

And so, let’s find out what’s going on here and why. To start with, 2 rotateController and animationController are created. The first one is needed to create the rotation animation, the second one will be responsible for the animation itself. Next, we add a listener that will react to changes and redraw the widget as the animation progresses. When the first animation is finished, the animation will start at animationController. This is done to improve the visual. Reverse animation will be executed in parallel and there at the same time. For rotation we use Transform.rotate, the rotation of which depends on the rotateController.value. For our CustomIconPaint, we pass the animationController.value as a value parameter. An intermediate result between 0 and 1, for the time we specify in the duration parameter, will be transmitted to our paint, our animation will already depend on it. At this point, we have this result.

We are a team of rock-star developers, which provides fully-flexible and powerful products 💥.