How to make ripple page transition in 3 minutes using Flutter
Flutter makes beautiful animations easy. That’s the fact. What is also the fact is that we as developers are scared to push our apps to the next level by adding those minor animations that make the app beautiful instead of just pretty. Let’s change it together! In this post, I’d like to show you how we can add a ripple effect that may make your client say “I like that!”.
. . .
As a starting point, let’s have a simple app having two pages and transition between them. When a user clicks the
FloatingActionButton, he gets redirected to the second page.
And it looks like this:
. . .
Getting FAB position
In order to perform our ripple effect, we need to have the starting position of the Floating Action Button. The easiest way to do it is to use rect_getter package by DebuggerX. Let’s add it to the
And now let’s use it. To do so, we need a
Key which we can later refer to in order to get FAB’s position. We will pass that key to the
RectGetter widget which will wrap out FloatingActionButton:
. . .
Adding ripple widget
If we want to have one widget on top of others, there are two Widgets we should think of:
Stack. Both of them let us position widgets anyway we want. Even though
Overlay would suit nicely to the expand animation, it gets a bit more tricky when we want to navigate to another page, so today we will go with a
_ripple() appear after the
Scaffold ensures, that whatever ripple will look like, it will be drawn on top of the Scaffold. How should ripple look like? For now, let’s make it an empty
Container if there is no
rect saved. If there is
rect saved, let’s draw a circle in the exact position of the Floating Action Button. To place a Widget in the Stack on the exact position, we can use
If we comment out the transition to the next page, the effect will be a blue dot covering our floating action button after it is clicked.
. . .
Expanding ripple widget
Now it’s time to expand the widget to the full screen. There are two things we need to cover: setting the desired dimensions of the blue dot and adding animation between small and big circle.
To change the size of the ripple, we will use
Rect.inflate() method. This method causes Rect to grow in each direction by a specified distance. In our case, it will be the longest side of the screen multiplied by 1.3 just to make sure the final circle will cover the whole screen. However, we cannot change the size right after we set it to the original one (covering the fab). We need to delay it a bit, to be more specific, we just need a one frame delay. That’s why we will use
WidgetsBinding.postFrameCallback. Having that, we are sure that there is a small circle for one frame and then it becomes the big one. After a short delay, we can move to the other page. The code looks like that:
And the effect is blinking blue page transitioning to the new one:
Why is the effect so bad? Because we haven’t introduced any animations yet. The
Positioned widget simply updates its boundaries presenting the blue screen to the user. Luckily, if we want this transition from a small dot to blue screen go smoothly, we can just replace
AnimatedPositioned will take care of our animation leaving us with the result:
And that’s it!
As you can see, we needed only
AnimatedPositioned to get this nice animation you can use in your app.
I hope that post was useful for you. The full code can be found here. If you have any questions, feel free to ask in the comment.
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!
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.
Check out other posts!
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.
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 🙂
As developers, we have always get into situations where the designers require some fancy transitions which look awesome on the design but are extremely difficult to implement. Being Flutter developer makes it different, makes it fun because we have tools to do it! To prove it in this post, I will continue implementing awesome Buy Tickets design by Dldp and add bottom sheet transitions!