3D Kinetic Type Poster in Flutter
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. 😉
. . .
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
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:
. . .
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
. . .
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. 🙂
. . .
PS: If you want to see how I got to the final result, be sure to see the uncut video on the process!
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
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
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
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!
Hello Marcin, the video and blog is very useful to understand the power of the Transformer Widget. I want to know that would it be easier to perform same above task using below packages:
Maybe 🙂 But in general when I approach complex UIs I prefer to not use any libraries and write it myself so that I’m sure I’m doing it right. 😀
@marcin_szalek:disqus do you have the source code from Flight Stepper showed on Flutter Europe?
Yeah 🙂 Everything related to this talk is here: http://fidev.io/complex-ui/