Flutter随机抽象头像生成插件random_abstract_avatar的使用

Flutter随机抽象头像生成插件random_abstract_avatar的使用

生成独特的抽象用户头像

特性

• ✨ 高度可定制化：允许自定义颜色和装饰
• ♻️ 混合匹配：可以选择用于生成的几何形状
• ✔️ 离线使用：由于不使用外部服务（如Gravatar），因此在无网络连接的情况下也可以正常工作
• 🚀 快速生成：借助hashlib和dart UI画布，头像图像可以即时生成

开始使用

包含在项目中

import 'package:random_abstract_avatar/random_abstract_avatar.dart';

基本组件

Avatar(source: 'test')

基本示例

class _TestAppState extends State<TestApp> {
  final _controller = TextEditingController(text: 'flutter!');

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller.addListener(() {
      setState(() {});
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
              SizedBox(
                  width: 200,
                  child: TextField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Username',
                    ),
                    controller: _controller,
                  )),
              const SizedBox(width: 16),
              Avatar(
                source: _controller.text,
                foregroundColor: Colors.pink,
                backgroundColor: Colors.black,
                size: 64,
              ),
            ]))));
  }
}

示例项目

一个示例项目可以在存储库的example文件夹中找到。

常见问题解答

• 我设置了渐变/装饰图像，但未显示，为什么？
  • 如果你使用了装饰来设置头像，确保backgroundColor被设置为透明，否则它将不会显示。

贡献

欢迎通过提交拉取请求来支持我并解决开放的问题。

捐赠

如果您能够支持我的工作，我将非常感激。谢谢。

• ko-fi
• paypal

示例代码

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

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

class TestApp extends StatefulWidget {
  const TestApp({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() => _TestAppState();
}

class _TestAppState extends State<TestApp> {
  final _controller = TextEditingController(text: 'flutter!');

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller.addListener(() {
      setState(() {});
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Row(children: [
      SizedBox(
        width: 200,
        child: TextField(
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'Username',
          ),
          controller: _controller,
        ),
      ),
      const SizedBox(width: 16),
      Avatar(
        source: _controller.text,
        size: 64,
        borderRadius: 0,
        backgroundColor: Colors.black,
        foregroundColor: Colors.redAccent,
        primitives: const [AvatarPrimitive.circle],
        decoration: const BoxDecoration(
          boxShadow: [BoxShadow(blurRadius: 8)],
        ),
      ),
      const SizedBox(width: 16),
      Avatar(
        source: '${_controller.text}3-30r',
        size: 64,
        borderRadius: 8,
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.pink.shade100, Colors.blue.shade100],
              begin: Alignment.topCenter,
              end: Alignment.bottomRight),
          boxShadow: const [BoxShadow(blurRadius: 8)],
        ),
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.grey,
        primitives: const [AvatarPrimitive.triangle],
      ),
      const SizedBox(width: 16),
      Avatar(
        source: '${_controller.text}d310',
        size: 64,
        borderRadius: 16,
        decoration: const BoxDecoration(
          image: DecorationImage(image: AssetImage('assets/marble.png')),
          boxShadow: [BoxShadow(blurRadius: 8)],
        ),
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.grey.shade700,
        primitives: const [AvatarPrimitive.circle, AvatarPrimitive.square],
      ),
      const SizedBox(width: 16),
      Avatar(
        source: '${_controller.text}ofies39q',
        size: 64,
        borderRadius: 24,
        decoration: const BoxDecoration(
          boxShadow: [BoxShadow(blurRadius: 8)],
        ),
        backgroundColor: Colors.lime,
        foregroundColor: Colors.grey.shade700,
        primitives: const [AvatarPrimitive.circle, AvatarPrimitive.square],
      ),
      const SizedBox(width: 16),
      Avatar(
        source: '${_controller.text}ererre',
        size: 64,
        borderRadius: 32,
        decoration: const BoxDecoration(
          boxShadow: [BoxShadow(blurRadius: 8)],
        ),
        backgroundColor: Colors.black,
        foregroundColor: Colors.purpleAccent,
        primitives: const [AvatarPrimitive.circle, AvatarPrimitive.square],
      ),
    ]))));
  }
}