Flutter — FloatingActionButton ripple page transition

How to make a spread-out and shrink-in ripple page transition?

Hello guys, today I’m going to introduce another fantastic animation. When users tap the FAB(FloatingActionButton), we navigate them from page A to page B with an animation. Not like traditional fade-in/fade-out or slide-in/slide-out one. It provides a more interesting and intuitive behavior that lets users know there is a transition between two pages via tapping the FAB button. Okay, let’s get started~

Table of Contents

1. Default page transition
2. Replace the MaterialPageRoute with a custom fade-in/fade-out PageRouteBuilder
3. Get the FAB button position/size to mock a ripple widget on it after tapping the FAB
4. Create a spreading-out ripple effect when entering page B
5. Create a shrinking-in ripple effect when leaving page B
6. Final code

Default page transition

Here is a simple sample that we put a FAB button on page A. When users tap it, they will be navigated to page B. Page transition we use here it a default one: MaterialPageRoute.

The transition looks like:

We can see that page B slides from bottom to up. It sometimes confuses us of what is happening. That’s why we want to improve it.

Replace the MaterialPageRoute with a custom fade-in/fade-out PageRouteBuilder

The first thing is to customize a FadeRouteBuilder which inherits PageRouteBuilder.

The key point here is to return a FadeTransition for transitionBuilder. We replace MaterialPageRoute with FadeRouteBuilder. Here is the result:

Get the FAB button position/size…