Flutter - Using the Avatar Glow

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.

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.

Flutter - Using the Avatar Glow

ms471841

Improve

Article Tags :

Flutter - Using the Avatar Glow

Implementation:

Similar Reads

Thank You!

What kind of Experience do you want to share?