CODEWITHSUNDEEP
flutterdartflutter-layout
SardorbekR
SardorbekR

Reputation: 1778

How to make double ripple effect on button pressed?

How to get such ripple effect button clicked, as shown in the image below?

enter image description here

Upvotes: 0

Views: 727

Answers (1)

bluenile
bluenile

Reputation: 6029

Ripple effect can easily be achieved with 'Avatar Glow' package.

This Flutter package provides a Avatar Glow Widget with cool background glowing animation.

Live Demo: https://apgapg.github.io/avatar_glow/

You can also achieve the same effect with an AnimatedContainer & IconButton the following code.

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RippleEffect();
  }
}

class RippleEffect extends StatefulWidget {
  @override
  _RippleEffectState createState() => _RippleEffectState();
}
class _RippleEffectState extends State<RippleEffect> {
  bool show = false;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedContainer(
        width: 80,
        height: 80,
        duration: Duration(seconds: 2),
        curve: Curves.easeOutQuart,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.purple,
          boxShadow: [
            if (show)
              for (var i = 0; i < 5; i += 1)
                BoxShadow(
                    spreadRadius: i * 40.0,
                    color: Colors.purple.withAlpha((255 ~/ (i + 1))))
          ],
        ),
        child: IconButton(
          icon: Icon(Icons.looks_two, color: Colors.white),
          onPressed: () {
            setState(() {
              show = !show;
            });
          },
        ),
      ),
    );
  }
}

Upvotes: 1

Related Questions