Ripple into page with Flutter

onat çipli
Flutter Community
2 min readMay 21, 2021

--

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.

--

--

onat çipli
Flutter Community

Software Engineer who enjoys creating mobile applications with Flutter and Dart