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 :
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 :
- 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
Post a Comment