How to make a button with ripple effect?-CodePudding

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?

CodePudding user response：

I have prepared one ripple class. Inspired by