Home > OS >  How to make a button with ripple effect?
How to make a button with ripple effect?

Time:06-08

enter image description here

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;
}

enter image description here

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 enter image description here

  • Related