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.