3D Kinetic Type Poster in Flutter

by Mar 2, 2020Flutter6 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!

Stripe Checkout in Flutter Web

Stripe Checkout in Flutter Web

Flutter Web is getting more mature every day. If you want to accept payments using Stripe Checkout in your Flutter web application, this article is just for you!

Stripe Checkout in mobile Flutter app

Stripe Checkout in mobile Flutter app

Have you ever struggled to integrate card payments into your mobile Flutter app? If so, today is your lucky day! In this post, I present how to use Stripe Checkout in the Flutter app without any hassle!

Interacting with Widgets using Framy

Interacting with Widgets using Framy

Have you ever developed a widget or a page and you wanted to make sure it works correctly in different scenarios but then it turned out that you can’t just reproduce all the cases you want to cover? Framy may solve such problems!

Share This

Share This

Share this post with your friends!