Flutter头像生成插件flutter_avataaar的使用

Flutter头像生成插件flutter_avataaar的使用

flutter_avataaar 是一个用于在 Flutter 应用程序中生成 Avataaars 头像的插件。Avataaars 是一个免费的在线头像生成器，任何人都可以轻松创建自己的漂亮个人头像。

开始使用

1. 创建 Avataaar 对象

// 使用默认构造函数创建头像
Avataaar(
  skin: Skin.pale,
  top: Top(
    topType: TopType.longHairCurvy,
    accessoriesType: AccessoriesType.Round,
    facialHair: FacialHair.beardMagestic(
      facialHairColor: FacialHairColor.BlondeGolden,
    ),
  ),
);

// 随机化所有属性
Avataaar.random();

// 或者混合两者
Avataaar.random(
  skin: Skin.pale,
  top: Top(
    topType: TopType.longHairCurvy,
    accessoriesType: AccessoriesType.Round,
    facialHair: FacialHair.random,
  ),
);

2. 创建 AvataaarGenerator 小部件并传递头像

AvataaarGenerator(
  avataaar: avataaar,
  onTranslateKey: (String key) {
    return Translate.get(key);
  },
  onUpdateAvataaar: () {setState(() {});},
);

// 默认情况下，包将使用 SvgPicture 渲染图像。您可以使用 AvataaarPicture 来创建自定义
// [builder] 构造函数，并为给定的图像 URL 创建小部件：
AvataaarPicture.builder(
  builder: (context, avataaar) {
    // 自定义逻辑
  },
)

保存头像

使用 Avataaar.toJson() 和 Avataaar.fromJson(String) 方法来序列化和反序列化头像。

// 序列化
final json = _avatar.toJson();

// 反序列化
final avatar = Avataaar.fromJson(json);

获取图像字节

使用 Avataaar 类中的 getPngFromSvg 函数获取 PNG 文件。

final file = await _avatar.getPngFromSvg();

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_avataaar 插件生成和保存头像。

import 'package:example/assets_loader.dart';
import 'package:flutter/material.dart';
import 'package:flutter_avataaar/flutter_avataaar.dart';

void main() => runApp(const AvataaarExample());

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

  [@override](/user/override)
  State<AvataaarExample> createState() => _AvataaarExampleState();
}

class _AvataaarExampleState extends State<AvataaarExample> {
  final String baseUrl = 'https://avataaars.io';
  late Avataaar _avatar;

  [@override](/user/override)
  void initState() {
    super.initState();
    _avatar = Avataaar.random(baseUrl: baseUrl);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(title: const Text('Avataaars'), centerTitle: true),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                Expanded(
                  child: FutureBuilder<Map<String, dynamic>>(
                    future: AssetsLoader().load(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        var data = snapshot.data!;
                        return AvataaarGenerator(
                          avataaar: _avatar,
                          onUpdateAvataaar: () => setState(() {}),
                          onTranslateKey: (p0) {
                            return data[p0] ?? 'unknown';
                          },
                        );
                      } else {
                        return CircularProgressIndicator();
                      }
                    },
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      iconSize: 48.0,
                      icon: const Icon(Icons.refresh),
                      onPressed: () => setState(() => _avatar = Avataaar.random(baseUrl: baseUrl)),
                    ),
                    Builder(
                      builder: (_) {
                        return ElevatedButton(
                          onPressed: () async {
                            try {
                              final file = await _avatar.getPngFromSvg();
                              ScaffoldMessenger.of(_).showSnackBar(
                                SnackBar(
                                  content: Text(file.path),
                                  behavior: SnackBarBehavior.floating,
                                ),
                              );
                            } on Exception catch (e) {
                              ScaffoldMessenger.of(_).showSnackBar(
                                SnackBar(
                                  content: Text(e.toString()),
                                  behavior: SnackBarBehavior.floating,
                                ),
                              );
                            }
                          },
                          child: Text('保存图标'),
                        );
                      },
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}