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: