Flutter头像生成插件avatar_maker的使用

Flutter头像生成插件avatar_maker的使用

简介

avatar_maker 是一个轻量级且高度可定制的SVG图形集，适用于Flutter应用。它提供了头像生成、自定义和其他实用工具小部件/函数。以下是关于如何使用该插件的详细说明和完整示例代码。

可用的小部件

avatar_maker 提供了以下三个易于使用的Flutter小部件：

名称	描述	截图
AvatarMakerAvatar	在你的Flutter应用中任何地方使用可自定义的头像小部件。支持Material深色主题。
AvatarMakerCustomizer	一个全面的UI用于自定义用户的头像。提供每个组件的预览，并可以通过 AvatarMakerThemeData 进行调整。
AvatarMakerRandomWidget	默认渲染一个随机按钮，或者可以作为 InkWell 包装器用于 child 小部件。每次显示属性类别时会随机更改头像属性。
AvatarMakerResetWidget	默认渲染一个重置按钮，或者可以作为 InkWell 包装器用于 child 小部件。将头像重置为上次保存的状态。
AvatarMakerSaveWidget	默认渲染一个保存按钮，或者可以作为 InkWell 包装器用于 child 小部件。

自定义

avatar_maker 提供了多种自定义选项，包括主题、类别和属性以及本地化。

主题

你可以通过 AvatarMakerThemeData 来调整小部件的外观，例如自定义器的背景颜色、盒子装饰等。

类别和属性

所有类别（如服装或头发）和所有属性（如头发或面部毛发的颜色）都是完全可自定义的。你可以更改标题、隐藏类别或添加自定义属性。具体操作请参考相关文档。

本地化

通过定义语言环境，你可以更改显示的标题语言。目前支持的语言有：

• 英语（默认）
• 法语

实用函数

avatar_maker 提供了一些实用函数，用于与服务器或数据库高效地发送和接收数据：

使用步骤

1. 依赖插件 在 pubspec.yaml 文件中添加 avatar_maker 依赖：

   dependencies:
     avatar_maker: latest_version
   

2. 导入包 在你的Dart文件中添加以下导入语句：

   import "package:avatar_maker/avatar_maker.dart";
   

3. 显示头像 使用 AvatarMakerAvatar 小部件在需要的地方显示头像：

   AvatarMakerAvatar();
   

4. 自定义头像 添加 AvatarMakerCustomizer 小部件以允许用户个性化他们的头像：

   AvatarMakerCustomizer();
   

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 avatar_maker 插件：

import "dart:math";
import "package:flutter/material.dart";
import "package:avatar_maker/avatar_maker.dart";

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Avatar Maker Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      // darkTheme: ThemeData.dark(),
      home: MyHomePage(title: 'Avatar Maker'),
    );
  }
}

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

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
        centerTitle: true,
      ),
      body: ListView(
        physics: BouncingScrollPhysics(),
        children: <Widget>[
          SizedBox(height: 25),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              "Use your Avatar Maker anywhere\nwith the below widget",
              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
              textAlign: TextAlign.center,
            ),
          ),
          SizedBox(height: 25),
          AvatarMakerAvatar(
            backgroundColor: Colors.grey[200],
            radius: 100,
          ),
          SizedBox(height: 25),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "and create your own page to customize them using our widgets",
              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
              textAlign: TextAlign.center,
            ),
          ),
          SizedBox(height: 50),
          Row(
            children: [
              Spacer(flex: 2),
              Expanded(
                flex: 3,
                child: Container(
                  height: 35,
                  child: ElevatedButton.icon(
                    icon: Icon(Icons.edit),
                    label: Text("Customize"),
                    onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage())),
                  ),
                ),
              ),
              Spacer(flex: 2),
            ],
          ),
          SizedBox(height: 100),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    var _width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 30),
                child: AvatarMakerAvatar(
                  radius: 100,
                  backgroundColor: Colors.grey[200],
                ),
              ),
              SizedBox(width: min(600, _width * 0.85), child: Row(
                children: [
                  Text(
                    "Customize:",
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  Spacer(),
                  AvatarMakerSaveWidget(),
                  AvatarMakerRandomWidget(),
                  AvatarMakerResetWidget(),
                ],
              )),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 30),
                child: AvatarMakerCustomizer(
                  scaffoldWidth: min(600, _width * 0.85),
                  autosave: false,
                  theme: AvatarMakerThemeData(
                      boxDecoration: BoxDecoration(boxShadow: [BoxShadow()])),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}