In this post, we’re going to learn how to create probably the most useless effect on this blog. Why would you want to learn such a thing? Well, it looks really cool and maybe you will find some cool applications for it! ? The design is named 3D CSS Kinetic Type Poster. It was created by Pete Barr, who shared the design on dribbble and the front-end implementation on codepen. Let’s see if we can do it in Flutter as well!

Unfortunately, I didn’t get to create the entrance animation, so we will focus only on the main rotation. ?

Static text

Let’s start by creating a “LINEAR” text widget. We need it to be rotated, so the best option in this scenario is to use RotatedBox. It’s pretty straight forward:

Now in order to add nice fade at the bottom of the text, we can put LinearGradient on top of our current widget. The gradient will go from black at the bottom, to transparent at the top. The following code shows a bit more advanced formula just to make it look nicer but the idea is the same:

Now our LinearText will look like this:

Placing texts in a cilinder

Ok, we got the Linear Text, now it’s time to have 20 of those. In order to do it, we will generate list of 20 widgets and put them inside a Stack.

Obviously, putting 20 identical elements on top of each other doesn’t change anything in what’s displayed on the screen. What we need to do is to rotate and translate each of those texts. In order to do that, we can use Transform widget like presented in the following snippet:

Now we can see 20 rotated and translated elements. However, as you probably can notice, it looks a bit odd on the left side of the image. The reason of such effect is that elements in the Stack are always covering the other ones based on their order in the children list. This means that the elements that are being clearly behind are being drawn on top of the others which looks terrible. ?

The graphics below can help you understand what is exactly happening there. You can see that the first element of the list (index 0 on left image) is covered by the last one (index 9). Now we need to figure out how to get from the order on the left to the order on the right, where elements in front of the user are never covered by the elements behind them.

What we need

Luckily, we can achieve such effect in 2 simple steps:

Then, all we need to do is flip the elements on the left side, so that the last one is in front (bottom of the image).

Those 2 steps are easily implementable with the following code:

And now it will look much better:

Adding movement

Now it’s time to make all those texts move! As usual, we will start with creating an AnimationController, which will drive the whole animation:

Then, we need to update build method, so that for every element in the list, it will be moved by a small part of the circle. At first, we will need to use AnimatedBuilder widget, which will rebuild every text alongside the animation progress. Having that, all we need to do is take the animation’s value into account when calculating rotation value.

The implementation

And that’s it!

I know that my version is slower but it’s intentional – I like it this way. ?

The whole source code is available on my GitHub page.

If you have any questions, feel free to ask in the comment section below. ?

Cheers! ?

PS: If you want to see how I got to the final result, be sure to see the uncut video on the process!