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.

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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!