3D Kinetic Type Poster in Flutter

by Mar 2, 2020Flutter0 comments

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 have

What we need

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

First, we need to rotate each element by 90 degrees. This way we can easily separate the elements into left and right group.

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 design

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!

Marcin Szałek

Founder of Fidev

Flutter enthusiast since Alpha release in 2017. Believes that sharing is caring, which lead him to start a technical blog dedicated fo Flutter in its early days. Loves to see beautiful designs become real apps and is willing to help make it happen. Enjoys sunny beaches far from home.

Join the newsletter!

Join the newsletter to keep track with latest posts and get my special Widget to animate views' entrances without any hassle for FREE!

Check out other posts!

Water Drop effect in Flutter

Water Drop effect in Flutter

In this post, I’d like to share with you how to achieve a water drop effect in Flutter. Why would you spend your time learning such skill? Well, I have no idea but it looks cool so let’s get started! 😀

SY Travel UI Challenge

SY Travel UI Challenge

Check out the videos explaining how I implemented awesome SY Expedition Travel animation by Anton Skvortsov! In the following videos I will show you the whole process of creating a UI challenge in Flutter.

Thanos Snap Effect in Flutter

Thanos Snap Effect in Flutter

Have you ever woken up and thought “How awesome would it be to create Thanos snap effect in Flutter”? Probably not. Well… following Google’s Easter Egg I did. 🙂 And I’ve found out that no one did it in Flutter yet so why not give it a try! In this post, I will explain how I created a Thanos snap effect coming from Avengers: Infinity War movie. Enjoy 🙂

Share This

Share This

Share this post with your friends!