- Rotation of widgets can be applied using the Transform. The easiest usage is the named constructor
- Rotating objects on canvas is not directly possible. Instead, we need to apply the rotation to the whole canvas and draw the object onto that
- The respective reusable function is described under coding
It’s a common task to rotate objects on the screen in a certain angle. While widgets can be wrapped with the Transform widget in order to perform the rotation, it’s not that easy for objects being drawn on Canvas.
Since we have no widget tree there and everything is a little bit more low-level, we need to perform the rotation ourselves.
How to rotate widgets
Let’s give the whole topic a shallow, pleasant start by having a look at how rotation works with widgets.
Like I said, the general way for transformations of widgets inside the widget tree is the
It can be used like this:
angleis described as a double in radians where
2 * π radequals to 360°.
transformis a 4d matrix where values are stored in column major order.
This sounds more complicated than it is. The only things you need to remember are the following:
- If you want to know the radian angle based on the angle in degree, just calculate
degree * π / 180.
If you have the angle as number of full circles (e. g. 1 is 360°, 1/2 is 180°), you can just calculate
full_circle_amount * 2π
- Luckily, you can apply the same to the
Matrix4and don’t have to create your matrix manually. The named constructor
Matrix4.rotationZ()expects the angle in radians as well
And there is even a named constructor of the
Transform widget that completely abstracts from matrices:
Use it like this:
Why use canvas
If there are widgets for the very task we are trying to accomplish, then why even bother with the low-level canvas, you might ask yourself.
Although Flutter has a lot of built-in performance optimizations, there are enormous differences between the widget tree and the canvas when it comes to speed.
This is mostly because widgets are on a higher abstraction level, carrying a lot more information than just how to be rendered. You can get an idea of the complexity by reading the article about
How to rotate objects using CustomPaint / Canvas
When using the canvas, things are a little bit more complicated. That’s because the objects that can be drawn on the canvas like
Rect can not be rotated.
How do you rotate drawings if they do not provide an API for that?
Let’s illustrate this with a real world example:
We assume we have a friend that is excellent at drawing. He has one problem, though: he can only draw his perfect objects upright.
Instead of making him draw the shape rotated, we just rotate the sheet of paper, let him draw and rotate it back.
The question is: how exactly do we rotate the paper? If we just rotate it using the upper left corner as the center of the rotation, the drawing may not even be on the sheet.
If we always use the center of sheet as the center of the rotation, the drawing might be displaced.
- Assuming the pen of the drawer is on the top left of the sheet (which it usually is), we need to move the sheet by the amount the object we want to have drawn on is displaced (relative to the top left of the sheet).
- Then we rotate the sheet around its center.
- We let the person draw its objects
- Afterwards we move the sheet back to where it was so that further drawings are not rotated anymore
Let’s illustrate how it looks if we want to draw the Flutter logo on the bottom right of the paper frame:
Okay, now we understood the reference of the real world. But how do we apply this to Dart code?
Basically, we do something similar: before the rotation, we save the current canvas, because we want to restore it later.
After that, we do some translation so that the upcoming rotation actually the center of the object we want to draw.
Having rotated the canvas and translated back, we actually draw the object.
Finally, we need to restore the canvas, because we don’t want the transformation to be applied to all upcoming drawings.
Now we’d have a lot of code duplication if we copied and pasted these lines everywhere we want to rotate something, so let’s put it into a reusable code snippet:
That’s it! Because we want every possible drawing to be rotated, we expect a function instead of an object. There is no unified interface for every drawable object on the canvas like a
Let’s see how the usage would look like:
We’re assuming we have an
object with the properties
We use our newly created
drawRotated() function by providing the
Canvas object, the center of the object the rotation amount - in this case 90 °, a fourth of a circle as a circle is
2 * pi.
Rotating object on
Canvas is not as intuitive as it is in the widget tree. We can not apply a rotation to an object we want to draw.
However, we can just rotate the whole canvas and apply the resulting
Matrix to it.
By having created the analogy of a rotated sheet of paper and a person that can draw only upright, we could improve our understanding.
Also, we have created a reusable function to make it work for everything drawn on