Flutter动态头像光效插件avatar_glow的使用

描述

Avatar Glow 是一个Flutter小部件，提供带有酷炫背景发光动画的头像效果。你可以通过简单的配置为你的应用添加这种引人注目的视觉效果。

• Live Demo: https://apgapg.github.io/avatar_glow/

安装

在你的 pubspec.yaml 文件中，于 dependencies: 部分添加以下内容：

dependencies:
  avatar_glow: ^2.1.0  # 使用最新版本

或者直接从GitHub仓库获取最新更改：

dependencies:
  avatar_glow:
    git:
      url: https://github.com/apgapg/avatar_glow
      ref: master

使用方法

导入库

首先需要导入 avatar_glow 库：

import 'package:avatar_glow/avatar_glow.dart';

简单实现

下面是一个简单的用法示例，展示了如何创建一个带有发光效果的头像：

AvatarGlow(
  endRadius: 60.0,
  child: Material(     // 替换此子元素为你自己的内容
    elevation: 8.0,
    shape: CircleBorder(),
    child: CircleAvatar(
      backgroundColor: Colors.grey[100],
      child: Image.asset(
        'assets/images/dart.png',
        height: 50,
      ),
      radius: 30.0,
    ),
  ),
),

完整实现

对于更详细的配置选项，可以参考以下完整的例子：

AvatarGlow(
  startDelay: const Duration(milliseconds: 1000), // 开始延迟时间
  glowColor: Colors.white,                       // 发光颜色
  glowShape: BoxShape.circle,                    // 发光形状（圆形）
  animate: _animate,                             // 是否开启动画
  curve: Curves.fastOutSlowIn,                   // 动画曲线
  child: const Material(
    elevation: 8.0,
    shape: CircleBorder(),
    color: Colors.transparent,
    child: CircleAvatar(
      backgroundImage: AssetImage('assets/images/avatar.png'),
      radius: 50.0,
    ),
  ),
),

示例Demo

这里提供了一个完整的示例代码，展示了如何将 AvatarGlow 集成到应用程序中，并允许用户控制发光动画的启停：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Avatar Glow Demo',
      theme: ThemeData(useMaterial3: true),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  bool _animate = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Avatar Glow by @apgapg"),
      ),
      body: ListView(
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(32.0),
            color: Theme.of(context).primaryColor,
            child: Column(
              children: [
                AvatarGlow(
                  animate: _animate,
                  child: Material(
                    elevation: 8.0,
                    shape: const CircleBorder(),
                    child: CircleAvatar(
                      backgroundColor: Colors.grey[100],
                      radius: 30,
                      child: Image.asset(
                        'assets/images/dart.png',
                        height: 50,
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 32.0),
                AvatarGlow(
                  startDelay: const Duration(milliseconds: 1000),
                  glowColor: Colors.white,
                  glowShape: BoxShape.circle,
                  animate: _animate,
                  curve: Curves.fastOutSlowIn,
                  child: const Material(
                    elevation: 8.0,
                    shape: CircleBorder(),
                    color: Colors.transparent,
                    child: CircleAvatar(
                      backgroundImage: AssetImage('assets/images/avatar.png'),
                      radius: 50.0,
                    ),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 32.0),
          Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              AvatarGlow(
                animate: _animate,
                glowColor: Colors.red,
                child: Material(
                  elevation: 8.0,
                  shape: const CircleBorder(),
                  child: CircleAvatar(
                    backgroundColor: Colors.grey[100],
                    radius: 40.0,
                    child: Image.asset(
                      'assets/images/flutter.png',
                      height: 60,
                    ),
                  ),
                ),
              ),
              AvatarGlow(
                animate: _animate,
                glowColor: Colors.red,
                child: Material(
                  elevation: 8.0,
                  shape: const CircleBorder(),
                  child: CircleAvatar(
                    backgroundColor: Colors.grey[100],
                    radius: 40.0,
                    child: Image.asset(
                      'assets/images/love.png',
                      height: 60,
                    ),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 32.0),
          AvatarGlow(
            animate: _animate,
            glowColor: Colors.cyan,
            child: Material(
              elevation: 8.0,
              shape: const CircleBorder(),
              child: CircleAvatar(
                backgroundColor: Colors.grey[100],
                radius: 30.0,
                child: Image.asset(
                  'assets/images/dart.png',
                  height: 50,
                ),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: AvatarGlow(
        animate: _animate,
        glowColor: Colors.red,
        child: IconButton(
          onPressed: () {
            setState(() => _animate = !_animate);
          },
          iconSize: 42.0,
          icon: Icon(
            _animate ? Icons.pause_rounded : Icons.play_arrow_rounded,
            color: Colors.white,
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        notchMargin: 8,
        clipBehavior: Clip.antiAlias,
        color: Theme.of(context).primaryColor,
        shape: const CircularNotchedRectangle(),
      ),
    );
  }
}

这段代码创建了一个包含多个 AvatarGlow 小部件的应用页面，并且通过浮动按钮来切换所有发光动画的状态。希望这个例子能帮助你更好地理解和使用 AvatarGlow 插件！