flutter_ripple_effect 1.0.0
flutter_ripple_effect: ^1.0.0 copied to clipboard
A high-performance Flutter widget for creating interactive liquid ripple effects on images using custom GLSL shaders.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_ripple_effect/flutter_ripple_effect.dart';
void main() {
runApp(const RippleExampleApp());
}
class RippleExampleApp extends StatelessWidget {
const RippleExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Photo Ripple Example',
debugShowCheckedModeBanner: false,
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: Colors.black,
),
home: const ExampleScreen(),
);
}
}
class ExampleScreen extends StatefulWidget {
const ExampleScreen({super.key});
@override
State<ExampleScreen> createState() => _ExampleScreenState();
}
class _ExampleScreenState extends State<ExampleScreen> {
final RippleController _controller = RippleController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Photo\nRipple',
style: TextStyle(
fontSize: 32,
height: 1.1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 8),
const Text(
'Tap anywhere on the image to generate liquid ripples',
style: TextStyle(color: Colors.white60, fontSize: 14),
),
const SizedBox(height: 32),
Expanded(
child: Center(
child: AspectRatio(
aspectRatio: 1.0,
child: RippleEffect(
controller: _controller,
imageProvider: const AssetImage('assets/image.png'),
borderRadius: BorderRadius.circular(24),
power: 1.2,
),
),
),
),
const SizedBox(height: 24),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton.icon(
onPressed: () {
_controller.addRipple(
const Offset(0.5, 0.5),
power: 1.5,
);
},
icon: const Icon(Icons.water_drop),
label: const Text('Center Ripple'),
),
const SizedBox(width: 16),
OutlinedButton.icon(
onPressed: () => _controller.clear(),
icon: const Icon(Icons.clear_all),
label: const Text('Clear'),
),
],
),
],
),
),
),
);
}
}