Flutter高级头像处理插件flutter_advanced_avatar的使用

简介

flutter_advanced_avatar 是一个为Flutter应用提供高级头像自定义功能的插件。它不仅允许你创建基于图片或文本的头像，还提供了丰富的API来定制头像的各种属性，如大小、样式、状态指示器等，从而在你的应用中实现独特的外观和感觉。

高级头像主题展示

Advanced Avatar Light Theme	Advanced Avatar Dark Theme

参数说明

以下是AdvancedAvatar组件支持的主要参数及其描述：

示例代码

下面是一个完整的示例应用程序，演示了如何使用flutter_advanced_avatar插件中的AdvancedAvatar组件。此示例包括了多种不同的用法，例如仅显示名字首字母、添加状态指示器、插入图标或文字作为子元素、以及结合其他小部件一起使用等。

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Advanced Avatar Example'),
        ),
        body: Center(
          child: GridView.count(
            shrinkWrap: true,
            crossAxisCount: 3,
            children: [
              // 显示名字首字母，并带有红色状态指示器
              AdvancedAvatar(
                name: 'John Doe',
                statusColor: Colors.red,
              ),
              
              // 显示名字首字母，绿色状态指示器位于右上角
              AdvancedAvatar(
                name: 'Smith Corey',
                statusColor: Colors.green,
                statusAlignment: Alignment.topRight,
              ),
              
              // 使用图标代替默认的文字表示形式
              AdvancedAvatar(
                child: Icon(
                  Icons.account_circle,
                  color: Colors.white,
                  size: 40,
                ),
              ),
              
              // 设置更小的头像尺寸并保持红色状态指示器
              AdvancedAvatar(
                name: 'John Doe',
                statusColor: Colors.red,
                size: 40,
              ),
              
              // 更大的头像，带有一个较大的绿色状态指示器，位置在顶部右侧
              AdvancedAvatar(
                name: 'Smith Corey',
                statusColor: Colors.green,
                statusAlignment: Alignment.topRight,
                size: 80,
              ),
              
              // 较大的头像，包含一个关闭按钮的小部件
              AdvancedAvatar(
                child: Icon(
                  Icons.account_circle,
                  color: Colors.white,
                  size: 40,
                ),
                size: 120,
                children: [
                  AlignCircular(
                    alignment: Alignment.topLeft,
                    size: Size.square(32),
                    child: GestureDetector(
                      onTap: () => debugPrint('Close Tap'),
                      child: Container(
                        width: 32,
                        height: 32,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.red,
                        ),
                        foregroundDecoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.fromBorderSide(
                            Divider.createBorderSide(context),
                          ),
                        ),
                        child: Icon(Icons.close),
                      ),
                    ),
                  ),
                ],
              ),
              
              // 包含四个不同颜色方块的组合头像
              AdvancedAvatar(
                child: Text('CMYK'),
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      width: 16.0,
                      height: 16.0,
                      color: Colors.cyan,
                    ),
                  ),
                  Align(
                    alignment: Alignment.topRight,
                    child: Container(
                      width: 16.0,
                      height: 16.0,
                      color: Colors.pinkAccent,
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Container(
                      width: 16.0,
                      height: 16.0,
                      color: Colors.yellow,
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomRight,
                    child: Container(
                      width: 16.0,
                      height: 16.0,
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
              
              // 使用本地图片资源作为头像背景，带有一个橙色的边框装饰
              AdvancedAvatar(
                statusColor: Colors.deepOrange,
                image: AssetImage('assets/images/avatar.jpg'),
                foregroundDecoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: Colors.deepOrange.withOpacity(0.75),
                    width: 5.0,
                  ),
                ),
              ),
              
              // 使用图片作为头像，同时设置了阴影效果，并且在右上角添加了一个数字标记
              AdvancedAvatar(
                statusSize: 16,
                statusColor: Colors.green,
                image: AssetImage('assets/images/avatar.jpg'),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black54,
                      blurRadius: 16.0,
                    ),
                  ],
                ),
                children: [
                  AlignCircular(
                    alignment: Alignment.topRight,
                    child: Container(
                      width: 20,
                      height: 20,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                          width: 0.5,
                        ),
                        color: Colors.red,
                        shape: BoxShape.circle,
                      ),
                      child: Text(
                        '12',
                        style: TextStyle(
                          fontSize: 10,
                          fontWeight: FontWeight.w500,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码展示了如何利用flutter_advanced_avatar插件创建各种风格的头像，你可以根据实际需求调整这些配置项以满足特定的设计要求。