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{
  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

  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
    //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


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

  Widget build(BuildContext context) {
   return Scaffold(
      appBar: AppBar(
          title:Text("Simple Concept of Animation"),
          backgroundColor: Colors.redAccent
      body: Container(
               decoration: BoxDecoration(
       , //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.

2 Comments on this Article



Thank you for this animation. Do you know how to make the circle’s diameter equals to screen’s height? 

1 year ago

Hari Prasad Chaudhary

You can use MediaQuery.of(context).size.height; to get the screen height and apply it to Circle using SizedBox()

1 year ago

Please Wait...