Skip to content
Related Articles

Related Articles

Flutter – Using the Avatar Glow

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 28 Feb, 2022

Flutter has a package called avatar_glow that provides an Avatar Glow Widget with cool background glowing animation. In this article, we will explore the same package with an example.


First, add the dependency to the pubspec.yaml file as shown below:

Now import the following code to your main.dart file:

import 'package:avatar_glow/avatar_glow.dart';

A. sample code for creating is given below:


child: // Any widget(circle avatar , sizedbox etc)



import 'package:avatar_glow/avatar_glow.dart';
import 'package:flutter/material.dart';
void main() {
class Avatarglow extends StatelessWidget {
  const Avatarglow({Key? key}) : super(key: key);
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Geeks for Geeks"),
          centerTitle: true,
        body: Center(
          child: AvatarGlow(
            endRadius: 90.0,
            duration: Duration(milliseconds: 2000),
            repeat: true,
            showTwoGlows: true,
            repeatPauseDuration: Duration(milliseconds: 100),
            child: Material(
              // Replace this child with your own
              elevation: 8.0,
              shape: CircleBorder(),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(40),
                child: CircleAvatar(
                  backgroundColor: Colors.grey[100],
                    fit: BoxFit.fill,
                  ),// image
                  radius: 40.0,
                ),// circleAvatar
              ),// ClipRRect
            ),// Material 
          ),// avatarglow
        ),// center
      ),// Scaffold
    ); // MaterialApp


Explanation : 

Let’s now understand the above given example:

  • The main is a principal method called once the program is loaded.
  • Once a program is loaded runApp method will run and call the class that we created ( Avatarglow) to be Run.
  • This class is stateless as just we want to display only Glowing Image.
  • As flutter is based on widgets a widget must be Built.
  • Creating a Material App that allows us to use a scaffold. Scaffold allows us to use AppBar and Body.
  • The AppBar has a simple Text “Geeks for Geeks” and centretitle :true.
  • The body contains a Centered layout taking AvatarGLow.
  • The glowColor property set the glowing color.
  • The showTwoGlows when set to false it shows the first Glow when set to true show the second glow.
  • The endRadius range radius that glows end.
  • As a child you can set any widgets, here we have a network image.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!