Posted in Dart Flutter

Flutter – Create simple glowing Circle to understand Animation

Flutter – Create simple glowing Circle to understand Animation Posted on May 23, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

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, I 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.

glow circle animation flutter

You can see this too: Flutter – How to create Wave Curves animation using Clipper Path

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 simple animation using flutter.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *