FLUTTER

How to Make Glowing Play Button Animation in Flutter?

This browser does not support the video element.

Image shows implementation of the animated glowing play button

In this tutorial, you will learn how to implement a circular play button with glowing effect like ripples. This widget can be used in a UI as play button for a music player, start button for games or even as loading indicator. The implementation is quite simple as there is already a package available in Dart Pub called avatar_glow . We just need to install the package and customize it.

Install

The first step is to add the package avatar_glow to pubspec.yaml as shown below.

Import

Import the package at the top of the dart file.

Widget

This is the entire widget used for creating the glowing play button. Some of the important attributes we use here are:

1. startDelay - The time taken to start the animation initially.
2. glowColor - Color of the glow or ripple.
3. endRadius - The maximum radius till which the ripple spreads
4. duration - The time taken by the ripple or glow to begin from radius 0 to endRadius. You can make the ripple move fast by reducing the duration.
5. repeat - Boolean value deciding whether to repeat the animation or end it after the first ripple
6. showTwoGlows - Boolean value deciding whether to have two ripples or just one
7. repeatPauseDuration - The time delay between two animations if the repeat mode is ON

Hope you guys try this in your next UI. Good Luck!