Flutter头像生成插件tiny_avatar的使用

Flutter头像生成插件tiny_avatar的使用

开始使用

安装该插件：

flutter pub add tiny_avatar

在你的项目中导入该插件：

import 'package:tiny_avatar/tiny_avatar.dart';

特性

  • 从单个字符串生成唯一的头像。
  • 轻松自定义颜色、形状和大小。
  • 头像一致：相同的字符串始终生成相同的结果。
  • 完整的文档。

使用方法

TinyAvatar(
    baseString: 'John', // 用于生成头像的字符串
    dimension: 150, // 头像尺寸
);

自定义

更改配色方案

TinyAvatar(
    baseString: 'c418', // 用于生成头像的字符串
    dimension: 150, // 头像尺寸
    colourScheme: TinyAvatarColourScheme.heated, // 配色方案
),

圆形选项

TinyAvatar(
    baseString: 'Mary', // 用于生成头像的字符串
    dimension: 150, // 头像尺寸
    circular: true, // 是否为圆形
),

自定义边框半径

TinyAvatar(
    baseString: 'Elton John', // 用于生成头像的字符串
    dimension: 150, // 头像尺寸
    colourScheme: TinyAvatarColourScheme.seascape, // 配色方案
    borderRadius: 30, // 边框半径
),

自定义配色方案

TinyAvatar(
    baseString: 'Superman', // 用于生成头像的字符串
    dimension: 150, // 头像尺寸
    colourScheme: TinyAvatarColourScheme.summer, // 配色方案
    customColours: const [ // 自定义颜色列表
        Colors.red,
        Colors.orange,
        Colors.orangeAccent,
        Colors.yellow
    ],
)

更多关于Flutter头像生成插件tiny_avatar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter头像生成插件tiny_avatar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用tiny_avatar插件来生成头像的示例代码。tiny_avatar是一个轻量级的Flutter插件，用于生成简单的、风格化的头像。

首先，你需要在你的pubspec.yaml文件中添加tiny_avatar依赖：

dependencies:
  flutter:
    sdk: flutter
  tiny_avatar: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

安装完成后，你可以在你的Dart文件中使用TinyAvatar来生成头像。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tiny Avatar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tiny Avatar Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用TinyAvatar生成默认头像
            TinyAvatar(
              text: 'A',  // 你可以使用字母或首字母缩写
              backgroundColor: Colors.blue,
              foregroundColor: Colors.white,
            ),
            SizedBox(height: 20),
            // 使用TinyAvatar生成自定义大小和形状的头像
            TinyAvatar.circle(
              size: 100,
              text: 'JB',
              backgroundColor: Colors.green,
              foregroundColor: Colors.yellow,
            ),
            SizedBox(height: 20),
            // 使用TinyAvatar生成圆角矩形头像
            TinyAvatar.roundedRect(
              size: 80,
              borderRadius: 20,
              text: 'F',
              backgroundColor: Colors.red,
              foregroundColor: Colors.white,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含三个不同样式和大小的头像：

  1. 使用默认设置的TinyAvatar。
  2. 使用自定义大小和形状的圆形头像TinyAvatar.circle。
  3. 使用自定义大小和圆角矩形边框的头像TinyAvatar.roundedRect。

你可以根据需要调整text、backgroundColor、foregroundColor、size和borderRadius等参数，以生成符合你需求的头像。

希望这个示例能帮你快速上手tiny_avatar插件的使用！

回到顶部