global_ripple 1.0.2
global_ripple: ^1.0.2 copied to clipboard
A Flutter plugin for global water ripple effects on tap.
import 'package:flutter/material.dart';
import 'package:global_ripple/global_ripple.dart';
void main() {
runApp(const DemoApp());
}
class DemoApp extends StatefulWidget {
const DemoApp({super.key});
@override
State<DemoApp> createState() => _DemoAppState();
}
class _DemoAppState extends State<DemoApp> {
final GlobalRippleController _controller = GlobalRippleController();
@override
void initState() {
super.initState();
// Default to Material (Fill) style initially
_controller.defaultIsRippleColor =
Colors.blueAccent.withOpacity(0.15); // ignore: deprecated_member_use
_controller.defaultRadius = 80.0;
_controller.defaultDuration = const Duration(milliseconds: 1000);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GlobalRippleProvider(
controller: _controller,
child: MaterialApp(
title: 'Global Ripple Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
useMaterial3: true,
),
home: MyHomePage(controller: _controller),
),
);
}
}
class MyHomePage extends StatefulWidget {
final GlobalRippleController controller;
const MyHomePage({super.key, required this.controller});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
bool _isWaterRipple = false;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _toggleRippleStyle() {
setState(() {
_isWaterRipple = !_isWaterRipple;
widget.controller.defaultStyle =
_isWaterRipple ? RippleStyle.stroke : RippleStyle.fill;
// Update color and duration for water effect to look better
if (_isWaterRipple) {
widget.controller.defaultIsRippleColor =
Colors.white.withOpacity(0.2); // ignore: deprecated_member_use
widget.controller.defaultDuration = const Duration(milliseconds: 2000);
} else {
widget.controller.defaultIsRippleColor = Colors.blueAccent
.withOpacity(0.15); // ignore: deprecated_member_use
widget.controller.defaultDuration = const Duration(milliseconds: 1000);
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
title: const Text('Global Ripple Demo'),
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFF6dd5ed), Color(0xFF2193b0)],
),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Current Style: ${_isWaterRipple ? "Water (Stroke)" : "Material (Fill)"}',
style:
const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
Switch(
value: _isWaterRipple,
onChanged: (value) => _toggleRippleStyle(),
),
const SizedBox(height: 20),
const Text(
'Tap anywhere to see the ripple!',
style: TextStyle(fontSize: 16),
),
const SizedBox(height: 20),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_incrementCounter();
},
child: const Text('Tap Me (Pass-through check)'),
),
const SizedBox(height: 20),
OutlinedButton(
onPressed: () {
showDialog(
context: context,
builder: (c) => AlertDialog(
title: const Text("Dialog Test"),
content: const Text(
"Tap outside. Does ripple show?",
),
actions: [
TextButton(
onPressed: () => Navigator.pop(c),
child: const Text("Close"),
),
],
),
);
},
child: const Text("Show Dialog"),
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}