Flutter - Using the Avatar Glow

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

Step-by-step implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add  firebase_core and firebase_auth as dependencies in the dependencies part of the pubspec.yaml file, as shown below:

dependencies:
     flutter:
       sdk: flutter
     avatar_glow: ^3.0.1

Now, run the command below in the terminal.

flutter pub get

Or

Run the below command in the terminal.

flutter pub add firebase_core firebase_auth

Step 3: Import dependencies

To use libraries, import all of them in the respective .dart file.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';

Step 4: Start Coding

A sample code for creating is given below:

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

Example:

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 example:

• The main is a principal method is 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 we just want to display only the 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 sets the glowing color.
• The showTwoGlows when set to false, it shows the first Glow; when set to true shows the second glow.
• The endRadius range of the radius that glows.
• As a child, you can set any widgets. Here we have a network image.