Flutter – Using the Avatar Glow

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.

Implementation:

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:

Dart

Avatar(
glowColor:Colors.teal,
showTwoGlows:false,
endRadius:80.0,
child: // Any widget(circle avatar , sizedbox etc)
)

Example:

Dart

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

void main() {
  runApp(Avatarglow());
}

class Avatarglow extends StatelessWidget {
  const Avatarglow({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Geeks for Geeks"),
          centerTitle: true,
          backgroundColor: Colors.green,
        ),//AppBar
        body: Center(
          child: AvatarGlow(
            glowColor: Colors.green,
            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],
                  child: Image.network(
                    "https://external-content.duckduckgo.com
                    /iu/?u=https%3A%2F%2Fmedia.geeksforgeeks.
                    org%2Fwp-content%2Fcdn-uploads%2Fgfg_200X200.png&f=1&nofb=1",
                    fit: BoxFit.fill,
                  ),// image
                  radius: 40.0,
                ),// circleAvatar
              ),// ClipRRect
            ),// Material
          ),// avatarglow
        ),// center
      ),// Scaffold
    ); // MaterialApp
  }
}

Output:

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.