Flutter - Avatar Glow

 What Is Avatar Glow?

This Flutter package provides a Avatar Glow Widget with cool background glowing animation.

Getting  Started :

Adding Plugin  Into Yaml Dependency : 

To Use we need to import : 

 import 'package:avatar_glow/avatar_glow.dart';

Code :

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 : 

   -  main is a principal method called once the program is loaded.

   -  Once a program is loaded runApp method will run and call our class that we created ( Avatarglow) to be Runned.

   -  This class is a stateless as just we want to display only Glowing Image.

   -  As flutter is based on widget a widget must be Builded.

  -  Creating a Material App  that allow us to use scaffold .

  -  Scaffold allow us to use AppBar  and Body .

  -  The AppBar have a simple Text "Geeks gor Geeks" and centretitle :true.

  -   Body contain Centered layout taking AvatarGLow.

  -   glowColor property  set the glowing color.

  -  showTwoGlows when set to false it show 1 Glow , when set to true show 2 glow.

  -  endRadius range radius that glow end .

  -  As an child you can set any widgets , here we have a network image .

So, this is how we can use AvatarGlow widget in flutter and for full code of these examples, you can click here.

Comments

Popular Posts