Easy Glow / Pulse animation in Flutter Using Animation

Adding Glow animation to the button/container will help to increase the CTA and tell the user there is some important actions are ongoing.

In the audio recording app, you may have seen some glow animation as soon as you click the record button.

Adding that kind of animation to flutter app is pretty easy.

Before get started so let’s breakdown what are the things need to do

  1. Add drop shadow to the container
  2. Change the drop shadow spread radius
  3. Run the animation forward and backwards.

Make round shape container

Add a container and make it circle shape by setting shape property in Boxdecoration class. Also, you can add a mic icon in the middle of the container. Next, we can set the boxShadow property inside the BoxDecoration class. As an initial step, we can set static values to blurRadius and spreadRadius. 

    
Container(
            width: 100,
            height: 100,
            child: Icon(Icons.mic,color: Colors.white,),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Color.fromARGB(255, 27, 28, 30),
              boxShadow: [BoxShadow(
                color: Color.fromARGB(130, 237, 125, 58),
                blurRadius: 15,
                spreadRadius: 15
              )]
            ),
          )
    

Create Glow animation

You can use the animation controller to control the animation (duration, backwards and forward) and animation class to set the actual animation. In here we use Tween animation and values change from 2.0 to 15.0. These initialization need to be done inside the init method to make sure to execute a single time.

Then we can use the animation values and set that animation values to blurRadius and spreadRadius properties.

The animation has to be repeated infinitely. We can set repeat animation using repeat method in animation controller and in because we need to reverse the animation after each forward animation, you must set the reverse property to true.

    
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    // TODO: implement initState
    _animationController = AnimationController(vsync:this,duration: Duration(seconds: 2));
    _animationController.repeat(reverse: true);
    _animation =  Tween(begin: 2.0,end: 15.0).animate(_animationController)..addListener((){
      setState(() {
        
      });
    });
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        backgroundColor: Color.fromARGB(255, 38, 38, 38),
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            child: Icon(Icons.mic,color: Colors.white,),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Color.fromARGB(255, 27, 28, 30),
              boxShadow: [BoxShadow(
                color: Color.fromARGB(130, 237, 125, 58),
                blurRadius: _animation.value,
                spreadRadius: _animation.value
              )]
            ),
          ),
        ),
      ),
    );
  }
    
You Will Like Also