Create simple glowing Circle to Understand Animation in Flutter

Flutter is known for its beautiful UI and smooth animation. If you also want to make animation but don’t have any knowledge regarding it then have a look at the example below. In this example, we have made a simple glowing circle and changed its height and width using AnimationController(). This example is just to clear the basic concept of creating animation in Flutter for beginners.

Flutter Dart Code: Read the explanation on comment inside codes.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

//apply this class on home attribute of Material App at main.dart
class GlowCircle extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
     return _GlowCircle();
  }
}

class _GlowCircle extends State<GlowCircle>with SingleTickerProviderStateMixin {
  //use "with SingleThickerProviderStateMixin" at last of class declaration
  //where you have to pass "vsync" argument, add this

  Animation<double> animation; //animation variable for circle 1
  AnimationController animationcontroller; //animation controller variable circle 1

  @override
  void initState() {
    animationcontroller = AnimationController(vsync: this, duration: Duration(seconds: 1));
    //here we have to vash vsync argument, there for we use "with SingleTickerProviderStateMixin" above
    //vsync is the ThickerProvider, and set duration of animation
    
    animationcontroller.repeat();
    //repeat the animation controller

    animation = Tween<double>(begin: 0, end:250).animate(animationcontroller);
    //set the begin value and end value, we will use this value for height and width of circle

    animation.addListener(() {
         setState(() { }); 
         //set animation listiner and set state to update UI on every animation value change
    });

    super.initState();
  }

   @override
  void dispose() {
      super.dispose();
      animationcontroller.dispose(); //destory anmiation to free memory on last
  }

  @override
  Widget build(BuildContext context) {
   return Scaffold(
      appBar: AppBar(
          title:Text("Simple Concept of Animation"),
          backgroundColor: Colors.redAccent
      ),
      body: Container(
           padding:EdgeInsets.all(20),
           alignment:Alignment.center,
           height:300,
           child:Container( 
               decoration: BoxDecoration(
                 shape:BoxShape.circle, //making box to circle
                 color:Colors.deepOrangeAccent //background of container
               ),
               height:animation.value, //value from animation controller
               width: animation.value, //value from animation controller
           ),
      ),
   );
  } 
}

In this way, you can create a simple animation using flutter.