Flutter头像生成插件avataaars的使用

Avataaars 是一个 Flutter 包，它提供了 Avataaar 类，可以轻松生成漂亮的个人头像。这个包深受 Avataaars Generator 的启发。原始的头像由 Pablo Stanley 设计，可以在 这里 找到 Sketch 库。

展示

以下的 Avataaar 自定义器并不包含在这个包中，但可以在示例文件夹中找到。它应该展示了 Avataaar 类的功能。

使用

• 创建一个随机的 Avataaar 使用 Avataaar.random()。
• 通过使用 copyWith 方法来编辑各个部分。
• 调用 Avataaar.toSvg() 获取 SVG 字符串。

语言支持

• 英语
• 德语
• … （如果您想贡献，请查看 localization_strings.dart）

已知错误

在使用 flutter_svg 包来渲染 SVG 字符串时，控制台可能会出现警告。这通常与这个问题有关：issue。

完整示例代码

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

import 'avatar_customizer.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始化一个随机的 Avataaar
  Avataaar avataaar = Avataaar.random();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Avataaars')),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 显示自定义器并允许用户修改头像
            Container(
              padding: const EdgeInsets.all(10),
              constraints: const BoxConstraints(maxWidth: 600),
              child: AvatarCustomizer(
                // 初始值设置为随机生成的 Avataaar
                initialValue: avataaar,
                // 当值发生变化时更新状态
                onChanged: (a) => setState(() {
                  avataaar = a;
                }),
              )
            )
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个带有 Avataaar 自定义器的简单应用。用户可以通过界面修改头像，并实时预览更改。