Flutter头像生成与管理插件avatar_plus的使用

Avatar Plus

Avatar Plus 是一个 Flutter 包装器，用于 Multiavatar，可以轻松生成和自定义独特的头像。该包支持生成多达 120 亿个独特的头像，非常适合创建个人资料图片、游戏标志或为设计项目添加个性化元素。

特性

• 生成独特头像：只需点击或键盘快捷键即可根据任何文本输入生成头像。
• 可自定义：在 Flutter 应用程序中集成和自定义头像。
• 随机关联：名称和单词随机分配给头像，确保每个头像都是唯一的。
• 免费使用：在各种应用程序中自由使用任何生成的头像。

Demo

Screen 1	Screen 3	Screen 2

示例代码

以下是一个基本示例，演示如何使用 avatar_plus 包及其各种自定义选项：

基本示例

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Avatar Plus example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Example(),
    );
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: const Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "Avatar Plus",
            style: TextStyle(fontSize: 40),
          ),
          Text("Yudiz Solutions Limited © 2024"),
          SizedBox(
            height: 20,
          )
        ],
      ),
      body: Center(
        child: AvatarPlus(
          "jonny",
          height: MediaQuery.of(context).size.width - 20,
          width: MediaQuery.of(context).size.width - 20,
        ),
      ),
    );
  }
}

进阶用法

1. 获取头像作为字符串

String svgCode = AvatarPlusGen.instance.generate("Jonny");

2. 获取带有透明背景的头像字符串

String svgCode = AvatarPlusGen.instance.generate("Jonny", trBackground: true);

3. 获取头像作为 SVG 小部件

Widget svgWidget = AvatarPlus("Jonny", height: 100, width: 100);

4. 获取带有透明背景的头像 SVG 小部件

Widget svgWidget = AvatarPlus("Jonny", trBackground: true, height: 100, width: 100);

安装

在 pubspec.yaml 文件的 dependencies 部分添加以下行：

dependencies:
  avatar_plus: ^1.0.0

然后运行：

flutter pub get

使用

导入包

import 'package:avatar_plus/avatar_plus.dart';

基本示例

以下是一个简单的示例，演示如何使用 Avatar Plus 生成头像：

import 'dart:async';
import 'dart:math';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Avatar Plus example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(
        title: 'Avatar Plus example',
      ),
    );
  }
}

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

  final String title;

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

class MyHomePageState extends State<MyHomePage> {
  List<String> randomStrings = [];

  final int count = 10;
  final int length = 10;

  @override
  void initState() {
    randomStrings.addAll(generateRandomStrings(count, length));
    super.initState();
  }

  List<String> generateRandomStrings(int count, int length) {
    const String chars =
        'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    Random random = Random();

    List<String> strings = [];

    for (int i = 0; i < count; i++) {
      String randomString = '';
      for (int j = 0; j < length; j++) {
        randomString += chars[random.nextInt(chars.length)];
      }
      strings.add(randomString);
    }

    return strings;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          randomStrings.addAll(generateRandomStrings(count, length));
          setState(() {});
        },
        tooltip: 'Load more',
        label: const Text("Load more"),
        icon: const Icon(Icons.add),
      ),
      body: GridView.builder(
          padding: const EdgeInsets.all(12.0),
          itemCount: randomStrings.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, crossAxisSpacing: 20, mainAxisSpacing: 20),
          itemBuilder: (context, index) {
            return Card(
              child: InkWell(
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) =>
                              View(avatar: randomStrings[index])));
                },
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Hero(
                    tag: randomStrings[index],
                    child: AvatarPlus(
                      randomStrings[index],
                    ),
                  ),
                ),
              ),
            );
          }),
    );
  }
}

class View extends StatelessWidget {
  final String avatar;

  const View({super.key, required this.avatar});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: const Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "Avatar Plus",
            style: TextStyle(fontSize: 40),
          ),
          Text("Yudiz Solutions Limited © 2024"),
          SizedBox(
            height: 20,
          )
        ],
      ),
      body: Center(
        child: Hero(
          tag: avatar,
          child: AvatarPlus(
            avatar,
            height: MediaQuery.of(context).size.width - 20,
            width: MediaQuery.of(context).size.width - 20,
          ),
        ),
      ),
    );
  }
}

许可证

本项目采用 MIT 许可证 - 详情请参阅 LICENSE 文件。

贡献者

贡献者	贡献类型
YudizAndroidNaresh	🚆, ⚠️, 💻

贡献

欢迎贡献！如果您想为 Avatar Plus 贡献，请在 GitHub 仓库 上提交问题或拉取请求。

支持

如果您遇到任何问题或有疑问，请在 GitHub 上提交问题。

访客计数