Avatar Glow Package

Introduction of Avatar Glow Package

The Avatar Glow widget in Flutter is a custom widget that creates a glowing effect around an avatar or any other widget. It is commonly used to highlight a user’s profile picture or any other important element in the UI, giving it a visually appealing and attention-grabbing effect.

Properties of AvatarGlow Package:

endRadius: The radius of the glowing effect when it’s fully expanded. ( Type: double )

endRadius: 60.0,

glowColor: The color of the glowing effect. ( Type: Color )

glowColor: Colors.blue,

child: The widget around which the glow effect will be applied. ( Type: Widget )

child: CircleAvatar(
  backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
),

duration: The duration of the animation for the glow effect. ( Type: Duration )

duration: Duration(milliseconds: 2000),

repeat: Whether the glow animation should repeat. ( Type: bool )

repeat: true,

repeatPauseDuration: The duration of the pause between each repeat of the glow animation. ( Type: Duration )

repeatPauseDuration: Duration(milliseconds: 100),

startDelay: The delay before the glow animation starts. ( Type: Duration )

startDelay: Duration(milliseconds: 500),

showTwoGlows: Whether to show two layers of glow. ( Type: bool )

showTwoGlows: true,

curve: The animation curve for the glow effect. ( Type: Curve )

curve: Curves.easeInOut,

Usage:

import 'package:flutter/material.dart';
import 'package:avatar_glow/avatar_glow.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Avatar Glow Example')),
        body: Center(
          child: AvatarGlow(
            endRadius: 60.0,
            glowColor: Colors.blue,
            duration: Duration(milliseconds: 2000),
            repeat: true,
            repeatPauseDuration: Duration(milliseconds: 100),
            startDelay: Duration(milliseconds: 500),
            showTwoGlows: true,
            curve: Curves.easeInOut,
            child: CircleAvatar(
              backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
              radius: 30.0,
            ),
          ),
        ),
      ),
    );
  }
}

Final Code: This is the final code with the combination of some above Avatar Glow widget package properties.

import 'package:avatar_glow/avatar_glow.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 32, 32, 32),
      body: Center(
        child: AvatarGlow(
          curve: Curves.bounceIn,
          duration: Duration(seconds: 2),
          glowRadiusFactor: 1,
          glowColor: Colors.teal,
          child: Image(
            image: AssetImage('lib/img/profile-hussamhm.jpg'),
            height: 190,
          ),
          glowShape: BoxShape.rectangle,
        ),
      ),
    );
  }
}

In this example, the AvatarGlow widget is used to create a glowing effect around a CircleAvatar. The properties are set to control the radius, color, duration, repeat behavior, and other aspects of the glow effect. This widget is highly customizable and can be adjusted to fit the design needs of your Flutter application.

Thank for visiting Hybrid App Development
Posted by Hussam HM