Flutter随机生成头像插件random_avatar的使用

简介

random_avatar 是一个Flutter包装器，用于 Multiavatar，它是一个多元文化的头像生成器。Random Avatar旨在代表来自不同种族、文化、年龄组、世界观和生活背景的人们。总共可以生成 12,230,590,464 个独特的头像。

安装与使用

添加依赖

在你的pubspec.yaml文件中添加random_avatar：

dependencies:
  random_avatar: any # 或者指定最新版本

获取SVG代码字符串

你可以通过提供一个唯一的字符串来获取SVG代码：

String svgCode = RandomAvatarString('saytoonz');

如果你想让背景透明，可以这样做：

String svgCode = RandomAvatarString('saytoonz', trBackground: true);

获取SVG Widget

如果你想要直接在UI中显示头像，可以使用以下方法：

Widget svgCode = RandomAvatar('saytoonz', height: 50, width: 50);

同样地，如果需要透明背景的话：

Widget svgCode = RandomAvatar('saytoonz', trBackground: true, height: 50, width: 50);

更多用法示例请参考官方仓库中的例子。

Info

Multiavatar通过混合不同的头像部分和颜色主题来创建新的头像。每个唯一的头像都可以由唯一的字符字符串标识，该字符串也是Multiavatar包的输入，将其转换为六个两位数（范围00-47），每个数字代表最终头像的一部分。

例如：

• 000000000000 - 表示第一个头像及其A主题。
• 474747474747 - 表示第12,230,590,464个头像（或第16个初始头像及其"C"颜色主题）。

示例Demo

下面是一个完整的示例应用，演示如何使用random_avatar插件动态生成并展示随机头像：

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:random_avatar/random_avatar.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: 'Random Avatar example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Random Example'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  final List<Widget> _painters = <Widget>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Wrap(
          children: [
            FloatingActionButton(
              onPressed: () {
                String svg = RandomAvatarString(
                  DateTime.now().toIso8601String(),
                  trBackground: false,
                );
                log(svg);

                _painters.add(
                  RandomAvatar(
                    DateTime.now().toIso8601String(),
                    height: 50,
                    width: 52,
                  ),
                );
                _controller.text = svg;
                setState(() {});
              },
              tooltip: 'Generate',
              child: const Icon(Icons.gesture),
            ),
            const SizedBox(height: 20),
            ..._painters,
          ],
        ),
      ),
    );
  }
}

这个简单的应用程序允许用户点击按钮生成一个新的随机头像，并将其添加到屏幕上。每次点击都会生成一个新的头像，并且可以通过查看日志输出看到对应的SVG代码。