ER
ericdallo/ripple_effect
A Flutter pub package for add a ripple effect on your app
ripple_effect
A easy way to achieve a ripple effect on you flutter app.
Usage
First you need to wrap your page/Scaffold with the RipplePage widget, the ripple efect will growth until this widget. Then
wrap with the RippleEffect where the animation should begin. When the animation should begin, call the RippleEffect.start method passing you callback method(often navigate to other page).
The RipplePage and RippleEffect widgets need their GlobalKeys respectively to work.
Example
class Stateless extends StatelessWidget {
final pageKey = RipplePage.createGlobalKey();
final effectKey = RippleEffect.createGlobalKey();
@override
Widget build(BuildContext context) {
return RipplePage(
child: Scaffold(
body: Center(),
floatingActionButton: RippleEffect(
pageKey: pageKey,
effectKey: effectKey,
color: Colors.blue,
child: FloatingActionButton(
backgroundColor: Colors.blue,
onPressed: () =>
RippleEffect.start(effectKey, () => toNextPage(context)),
child: Icon(Icons.arrow_back),
),
)
),
);
}
}On this page
Languages
Dart100.0%
Contributors
MIT License
Created April 1, 2020
Updated February 16, 2025
