Ripple into page with Flutter

Welcome back again, Last week I saw the ripple page transitions and want to build for myself a widget to do that. So the ripple_navigation package appeared

First and easy way to do this use the package

It is pretty much straightforward and easy to use all you need to do is select a start point so widget as you guessed.

Do not forget to import the package first!

import 'package:ripple_navigation/ripple_navigation.dart';

wrap that widget with RippleLocation widget from the package, for example in my case its FloatingActionButton

RippleLocation(
    rippleController: rippleController,
    child: FloatingActionButton(
        onPressed: onPressed,
        tooltip: 'Increment',
        child: Icon(Icons.add),
    ),
)

RippleLocation widget needs rippleController, first create the rippleController inside your StatelessWidget or StatefullWidget

GlobalKey<RippleLocationState> rippleController = GlobalKey();

So you are ready to the navigate to next page with the ripple transition, all you need to do is use the pushRippleTransitionPage method from the controller

rippleController.currentState.pushRippleTransitionPage(
  context,
  SecondPage(),
);

And it is all Set up!!! You can also check the example inside the package

This is the package repository on Github, if this story hits 500 claps I will show what is going under the hood.

onatcipli/ripple_navigation