Pulse animation button Flutter

Question

Im looking for made exactly this pulse animation button in flutter.

Someone can help me ?

Answer 1

If you would like to implement it by yourself without the library (for better understanding or be proactive in custom), let's take a look:

The animation is combined from scale + fade

So we're using a Stack widget, with the animation widget behind the icon play, then we'll make the animation widget fade & scale at the same time by using FadeTransition & ScaleTransition

1. Declare scale & fade animation

late final AnimationController _controller = AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 1500),
)..repeat();
late final Animation<double> _scaleAnimation = Tween<double>(begin: 0.6, end: 1.2).animate(_controller);
late final Animation<double> _fadeAnimation = Tween<double>(begin: 1, end: 0.2).animate(_controller);

2. Declare widget

return Stack(
  alignment: AlignmentDirectional.center,
  children: [
    FadeTransition(
      opacity: _fadeAnimation,
      child: ScaleTransition(
        scale: _scaleAnimation,
        child: Container(
          width: 50 * 1.5,
          height: 50 * 1.5,
          decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green.shade300),
        ),
      ),
    ),
    Icon(
      Icons.play_circle,
      size: 50,
      color: Colors.green,
    )
  ],
);

3. Remember to dispose controller when exit

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

Answer 2

this is similar to your, avatar_glow:

AvatarGlow(
 endRadius: 60.0,
 child: Material(     // Replace this child with your own
   elevation: 8.0,
   shape: CircleBorder(),
   child: CircleAvatar(
     backgroundColor: Colors.grey[100],
     child: Image.asset(
       'assets/images/dart.png',
       height: 50,
     ),
     radius: 30.0,
   ),
 ),
),