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.
The first step is to add the package avatar_glow to pubspec.yaml as shown below.
Import the package at the top of the dart file.
This is the entire widget used for creating the glowing play button. Some of the important attributes we use here are:
- startDelay - The time taken to start the animation initially.
- glowColor - Color of the glow or ripple.
- endRadius - The maximum radius till which the ripple spreads
- 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.
- repeat - Boolean value deciding whether to repeat the animation or end it after the first ripple
- showTwoGlows - Boolean value deciding whether to have two ripples or just one
- repeatPauseDuration - The time delay between two animations if the repeat mode is ON
Hope you guys try this in your next UI. Good Luck!
How to do hero animation in Flutter?
Step by step guide on how to do hero animation in Flutter
How to Create Instagram like Story Circle Animation in Flutter?
Simple step by step guide on how to create Instagram story circle animation with Flutter.
Polygon clipper in Flutter
A guide on how to clip images in various polygon shapes using polygon_clipper in Flutter