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.