How to make a button with ripple effect? - flutter

Question

Here's what I've got
Positioned(
bottom: 15,
child: InkWell(
onTap: () {},
child: Material(
type: MaterialType.circle,
color: Color(0xFF246DE9),
child: Padding(
padding: const EdgeInsets.all(24),
child: Text(
'GO',
style: TextStyle(
fontSize: 25,
color: Colors.white,
),
),
),
),
),
),
Positioned(
bottom: 30,
child: CustomPaint(
size: Size(50, 50),
painter: CirclePainter(),
),
),
Circle Painter
class CirclePainter extends CustomPainter {
final _paint = Paint()
..color = Colors.white
..strokeWidth = 2
..style = PaintingStyle.stroke;
#override
void paint(Canvas canvas, Size size) {
canvas.drawOval(
Rect.fromLTWH(0, 0, size.width, size.height),
_paint,
);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
I created a stack, and tried to stack the white circle and the 'GO' button together, but I've no idea how to create that animation. The size of the white circle need to gradually increase, and it has to become invisible.
Can anyone help?

Answer 1

I have prepared one ripple class. Inspired by https://pub.dev/packages/ripple_animation. Please check it as below. Here, please update minRadius as per your child widget.
import 'dart:async';
import 'package:flutter/material.dart';
/// You can use whatever widget as a [child], when you don't need to provide any
/// [child], just provide an empty Container().
/// [delay] is using a [Timer] for delaying the animation, it's zero by default.
/// You can set [repeat] to true for making a paulsing effect.
class RippleAnimation extends StatefulWidget {
final Widget child;
final Duration delay;
final double minRadius;
final Color color;
final int ripplesCount;
final Duration duration;
final bool repeat;
const RippleAnimation({
required this.child,
required this.color,
Key? key,
this.delay = const Duration(milliseconds: 0),
this.repeat = false,
this.minRadius = 25,
this.ripplesCount = 5,
this.duration = const Duration(milliseconds: 2300),
}) : super(key: key);
#override
_RippleAnimationState createState() => _RippleAnimationState();
}
class _RippleAnimationState extends State<RippleAnimation>
with TickerProviderStateMixin {
late AnimationController _controller;
#override
void initState() {
_controller = AnimationController(
duration: widget.duration,
vsync: this,
lowerBound: 0.7,
upperBound: 1.0
);
// repeating or just forwarding the animation once.
Timer(widget.delay, () {
widget.repeat ? _controller?.repeat() : _controller?.forward();
});
super.initState();
}
#override
Widget build(BuildContext context) {
return CustomPaint(
foregroundPainter: CirclePainter(
_controller,
color: widget.color ?? Colors.black,
minRadius: 25,
wavesCount: widget.ripplesCount,
),
child: widget.child,
);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
}
// Creating a Circular painter for clipping the rects and creating circle shapes
class CirclePainter extends CustomPainter {
CirclePainter(
this._animation, {
required this.minRadius,
this.wavesCount,
required this.color,
}) : super(repaint: _animation);
final Color color;
final double minRadius;
final wavesCount;
final Animation<double> _animation;
final _paint = Paint()
..color = Colors.white
..strokeWidth = 2
..style = PaintingStyle.stroke;
#override
void paint(Canvas canvas, Size size) {
final Rect rect = Rect.fromLTRB(0.0, 0.0, 100, 100);
for (int wave = 0; wave <= wavesCount; wave++) {
circle(canvas, rect, minRadius, wave, _animation.value, wavesCount);
}
}
// animating the opacity according to min radius and waves count.
void circle(Canvas canvas, Rect rect, double minRadius, int wave,
double value, int length) {
Color _color;
double r;
if (wave != 0) {
double opacity = (1 - ((wave - 1) / length) - value).clamp(0.0, 1.0);
_color = color.withOpacity(opacity);
r = minRadius * (1 + ((wave * value))) * value;
print("value >> r >> $r min radius >> $minRadius value>> $value");
final Paint paint = Paint()..color = _color;
paint..strokeWidth = 2
..style = PaintingStyle.stroke;
canvas.drawCircle(rect.center, r, paint);
}
}
#override
bool shouldRepaint(CirclePainter oldDelegate) => true;
}
Example:
RippleAnimation(
ripplesCount: 1,
repeat: true,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle
),
width: 100,
height: 100,
child: Center(
child: Text(
'GO',
style: TextStyle(
fontSize: 25,
color: Colors.white,
),
),
),
),
color: Colors.white)
Please let me know if it doesn't work for you.