Flutter个性化头像生成插件acter_avatar的使用
Flutter个性化头像生成插件acter_avatar的使用
Acter Avatar 是一个用于生成不同形状头像的插件。它通过结合使用 Multiavatar 库和 Colorize Text Avatar 库来实现这一功能。该插件是 Acter a3 开发工作的一个衍生品。
CI 测试状态
ActerAvatar 参数
ActerAvatar 小部件支持 AvatarOptions 对象，这是其主要配置参数。根据不同的头像UI需求，可以通过多种方式初始化。
// 默认构造函数用法，例如适用于空间/群聊，可以支持徽章。
AvatarOptions(AvatarInfo avatar,
{List<AvatarInfo>? parentBadges,
double? size,
double? badgesSize})
AvatarOptions 还支持带有参数的命名构造函数，用于设置DM/群聊头像。
// 适用于设置DM/私聊头像。
AvatarOptions.DM(AvatarInfo avatar, {double? size});
// 适用于设置群聊DM头像。群聊头像将以堆叠的形式出现。
AvatarOptions.GroupDM(AvatarInfo avatar,
{List<AvatarInfo>? groupAvatars,
double? size,
double? groupAvatarSize})
AvatarInfo 类
AvatarInfo 类允许你存储与头像相关的数据。请参阅API文档以获取更多信息。
ActerAvatar 使用 🎉
ActerAvatar 接受 AvatarOptions 以及一些交互参数来渲染头像。
final avatarOptions = AvatarOptions(
AvatarInfo(
uniqueId: '@aliKah:lorem.org',
displayName: 'Ali Akalın',
avatar: NetworkImage(*someImageLink*), // 可以是任何图像提供者，如 AssetImage, MemoryImage 和 NetworkImage 等。
tooltip = ToolTipStyle.Combined,
size: 20,
),
);
return ActerAvatar(
options: avatarOptions,
);
你也可以提供一个头像未来（avatar future），如果数据不可用时将显示回退图像。它也可以被留为空（null），效果相同。
final avatarOptions = AvatarOptions(
AvatarInfo(
uniqueId: '@aliKah:lorem.org',
displayName: 'Ali Akalın',
avatarFuture: someFutureOrNull, // 这里应该是返回 ImageProvider 的 Future
size: 20,
),
);
return ActerAvatar(
options: avatarOptions,
);
你还可以在 AvatarOptions.groupDM() 命名构造函数中提供 AvatarInfo 列表，用于显示父级徽章和圆形堆叠群聊头像。
final avatarOptions = AvatarOptions(
AvatarInfo(
uniqueId: '@aliKah:lorem.org',
displayName: 'Ali Akalın',
avatar: NetworkImage(*someImageLink*),
),
parentBadges: [
// 更多 `AvatarInfo` 可以在这里添加。
],
size: 20,
parentBadgesSize: 10,
);
return ActerAvatar(
options: avatarOptions,
);
更多关于头像使用的详细信息，请参见我们的示例部分。
信用与许可
此插件基于 Deniz Çolak 的优秀 Colorize Text Avatar 包的分叉版本。
任何额外的工作：© 2023 Acter 协会，丹麦
以下是一个完整的示例代码，展示了如何使用 ActerAvatar 插件：
import 'package:flutter/material.dart';
import 'package:acter_avatar/acter_avatar.dart';
import 'package:flutter/services.dart';
import 'package:uuid/uuid.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// 这个小部件是你的应用程序的根。
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Acter Avatar',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.dark,
),
home: MyHomePage(title: 'Flutter Acter Avatar'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late Future<ImageProvider<Object>> getFutureImage;
var uuid = Uuid();
[@override](/user/override)
void initState() {
super.initState();
getFutureImage = getImage('assets/images/avatar-1.jpg');
}
// 示例：加载未来图像的字节。
Future<ImageProvider<Object>> getImage(String path) async {
late var bytes;
await Future.delayed(Duration(seconds: 3), () async {
ByteData imageData = await rootBundle.load(path);
bytes = imageData.buffer.asUint8List();
});
return MemoryImage(bytes);
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 20),
Padding(
padding: const EdgeInsets.all(5),
child: Text(
'示例 Acter 头像',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
),
),
SizedBox(
height: 20,
),
Text(
'指定大小的头像',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ActerAvatar(
options: AvatarOptions.DM(
AvatarInfo(
uniqueId: '@aliKah:lorem.org',
displayName: 'Ali Akalın',
avatarFuture: getFutureImage,
),
size: 36,
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.DM(
AvatarInfo(
uniqueId: '@belut:ipsum.org',
displayName: 'Bulut Peker',
avatar: AssetImage('assets/images/avatar-2.jpg'),
),
size: 36,
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.DM(
AvatarInfo(
uniqueId: '@ceylin:lipsum.org',
displayName: 'Ceylin Oztürk',
avatar: AssetImage('assets/images/avatar-3.jpg'),
),
size: 36,
),
),
],
),
),
const SizedBox(height: 20),
Text(
'默认大小的头像',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ActerAvatar(
options: AvatarOptions.DM(
AvatarInfo(
displayName: "Ali Akalın",
uniqueId: "@aliKah:lorem.org",
avatarFuture: getFutureImage,
),
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.DM(
AvatarInfo(
displayName: "Bulut Peker",
uniqueId: "@belut:ipsum.org",
avatar: AssetImage('assets/images/avatar-2.jpg'),
),
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.DM(
AvatarInfo(
displayName: "Ceylin Oztürk",
uniqueId: "@ceylin:lipsum.org",
avatar: AssetImage('assets/images/avatar-3.jpg'),
),
),
),
],
),
),
SizedBox(
height: 20,
),
Text(
'默认 Acter 头像',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 5.0, vertical: 8.0),
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "A-Space",
uniqueId: uuid.v4(),
),
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "B-Space",
uniqueId: uuid.v4(),
),
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "C-Space",
uniqueId: uuid.v4(),
),
),
),
SizedBox(
width: 12,
),
Text('.....'),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "Lorem",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-1.jpg'),
),
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "Ipsum",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-2.jpg'),
),
)),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "Lipsum",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-3.jpg'),
),
),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('回退',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w400)),
const SizedBox(width: 145),
Text('头像',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w400)),
],
),
),
],
),
),
const SizedBox(height: 20),
Text(
'具有父级徽章的默认 Acter 头像',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 5.0, vertical: 8.0),
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "A-Space",
uniqueId: uuid.v4(),
),
parentBadges: [
AvatarInfo(
uniqueId: uuid.v4(),
displayName: 'Lorem Ipsum'
)
],
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "B-Space",
uniqueId: uuid.v4(),
),
parentBadges: [
AvatarInfo(
uniqueId: uuid.v4(),
displayName: 'Lorem Ipsum'
),
AvatarInfo(
uniqueId: uuid.v4(),
displayName: 'Ipsum Lorem'
),
AvatarInfo(
displayName: "Lipsum",
uniqueId: uuid.v4()
),
AvatarInfo(
displayName: "Lipsum",
uniqueId: uuid.v4()
),
],
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "C-Space",
uniqueId: uuid.v4(),
),
parentBadges: [
AvatarInfo(
displayName: "Lipsum",
uniqueId: uuid.v4()
),
],
),
),
SizedBox(
width: 12,
),
Text('.....'),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: 'A-Space',
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-1.jpg'),
),
parentBadges: [
AvatarInfo(
displayName: "B-Space",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-2.jpg'),
),
],
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "B-Space",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-2.jpg'),
),
badgesSize: 16,
parentBadges: [
AvatarInfo(
displayName: 'A-Space',
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-1.jpg'),
),
AvatarInfo(
displayName: "C-Space",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-3.jpg'),
),
AvatarInfo(
displayName: "B-Space",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-2.jpg'),
),
AvatarInfo(
displayName: "B-Space",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-2.jpg'),
),
],
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions(
AvatarInfo(
displayName: "C-Space",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-3.jpg'),
),
parentBadges: [
AvatarInfo(
displayName: "C-Space",
uniqueId: uuid.v4(),
avatar: AssetImage('assets/images/space-3.jpg'),
),
],
),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('回退',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w400)),
const SizedBox(width: 145),
Text('头像',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w400)),
],
),
),
],
),
),
const SizedBox(height: 20),
Text(
'圆形 Acter 头像',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
SizedBox(
height: 20,
),
Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ActerAvatar(
options: AvatarOptions.DM(
AvatarInfo(
displayName: "Ali Akalın",
uniqueId: "@aliKah:lorem.org",
),
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.DM(
AvatarInfo(
uniqueId: '@belut:ipsum.org',
displayName: 'Bulut Peker',
),
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.DM(
AvatarInfo(
displayName: "Ceylin Oztürk",
uniqueId: "@ceylin:lipsum.org",
),
),
),
SizedBox(
width: 10,
),
Text('.....'),
SizedBox(
width: 10,
),
ActerAvatar(
key: UniqueKey(),
options: AvatarOptions.DM(
AvatarInfo(
displayName: "Ali Akalın",
uniqueId: "@aliKah:lorem.org",
avatarFuture: getFutureImage,
),
),
),
SizedBox(
width: 12,
),
ActerAvatar(
key: UniqueKey(),
options: AvatarOptions.DM(
AvatarInfo(
uniqueId: '@belut:ipsum.org',
displayName: 'Bulut Peker',
avatar: AssetImage('assets/images/avatar-2.jpg'),
),
),
),
SizedBox(
width: 12,
),
ActerAvatar(
key: UniqueKey(),
options: AvatarOptions.DM(
AvatarInfo(
displayName: "Ceylin Oztürk",
uniqueId: "@ceylin:lipsum.org",
avatar: AssetImage('assets/images/avatar-3.jpg'),
),
),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('回退',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w400)),
const SizedBox(width: 145),
Text('头像',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w400)),
],
),
),
],
),
const SizedBox(height: 20),
Text(
'圆形堆叠 Acter 头像',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
SizedBox(
height: 20,
),
Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ActerAvatar(
options: AvatarOptions.GroupDM(
AvatarInfo(
uniqueId: "@xantos:lipsum.org",
displayName: 'Xantos Salvo',
),
groupAvatars: [
AvatarInfo(
uniqueId: "@yuval:lorem.org",
displayName: "Yuval Noah",
),
AvatarInfo(
uniqueId: "@yuval:lorem.org",
displayName: "Yuval Noah",
),
AvatarInfo(
uniqueId: "@yuval:lorem.org",
displayName: "Yuval Noah",
),
AvatarInfo(
uniqueId: "@yuval:lorem.org",
displayName: "Yuval Noah",
),
],
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.GroupDM(
AvatarInfo(
uniqueId: "@yuval:lorem.org",
displayName: "Yuval Noah",
),
groupAvatars: [
AvatarInfo(
uniqueId: "@zoey:ipsum.org",
displayName: 'Zoey Gen',
),
],
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.GroupDM(
AvatarInfo(
uniqueId: "@zoey:ipsum.org",
displayName: 'Zoey Gen',
),
groupAvatars: [
AvatarInfo(
uniqueId: "@yuval:lorem.org",
displayName: "Yuval Noah",
),
AvatarInfo(
uniqueId: "@yuval:lorem.org",
displayName: "Yuval Noah",
),
AvatarInfo(
uniqueId: "@yuval:lorem.org",
displayName: "Yuval Noah",
),
],
),
),
SizedBox(
width: 10,
),
Text('.....'),
SizedBox(
width: 10,
),
ActerAvatar(
options: AvatarOptions.GroupDM(
AvatarInfo(
uniqueId: "@aliKah:lorem.org",
displayName: "",
avatar: AssetImage('assets/images/avatar-1.jpg'),
),
groupAvatars: [
AvatarInfo(
uniqueId: "@bulut:ipsum.org",
displayName: "Bulut Peker",
avatar: AssetImage('assets/images/avatar-2.jpg'),
),
AvatarInfo(
uniqueId: "@bulut:ipsum.org",
displayName: "Bulut Peker",
avatar: AssetImage('assets/images/avatar-2.jpg'),
),
],
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.GroupDM(
AvatarInfo(
uniqueId: "@bulut:ipsum.org",
displayName: "Bulut Peker",
avatar: AssetImage('assets/images/avatar-2.jpg'),
),
groupAvatars: [
AvatarInfo(
uniqueId: "@aliKah:lorem.org",
displayName: "Ali Akalin",
avatar: AssetImage('assets/images/avatar-1.jpg'),
),
],
),
),
SizedBox(
width: 12,
),
ActerAvatar(
options: AvatarOptions.GroupDM(
AvatarInfo(
uniqueId: '@ceylin:lipsum.org',
displayName: "Ceylin Oztürk",
avatar: AssetImage('assets/images/avatar-3.jpg'),
),
groupAvatars: [
AvatarInfo(
uniqueId: "@aliKah:lorem.org",
displayName: "Ali Akalin",
avatar: AssetImage('assets/images/avatar-1.jpg'),
),
AvatarInfo(
uniqueId: "@aliKah:lorem.org",
displayName: "Ali Akalin",
avatar: AssetImage('assets/images/avatar-1.jpg'),
),
],
),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('回退',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w400)),
const SizedBox(width: 145),
Text('头像',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w400)),
],
),
),
],
),
SizedBox(
height: 20,
),
],
),
),
),
);
}
}
更多关于Flutter个性化头像生成插件acter_avatar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter个性化头像生成插件acter_avatar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
acter_avatar 是一个用于生成个性化头像的 Flutter 插件。它可以帮助开发者在应用中快速创建基于用户名的默认头像，通常是将用户名首字母生成一个带有随机颜色背景的圆形头像。
以下是如何在 Flutter 项目中使用 acter_avatar 插件的步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 acter_avatar 插件的依赖：
dependencies:
flutter:
sdk: flutter
acter_avatar: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 以安装依赖。
2. 导入插件
在你的 Dart 文件中导入 acter_avatar 插件：
import 'package:acter_avatar/acter_avatar.dart';
3. 使用 ActerAvatar
ActerAvatar 提供了多种选项来生成个性化头像。以下是一些常见的使用方法：
基本用法
生成一个基于用户名的默认头像：
ActerAvatar(
name: 'John Doe',
)
自定义尺寸
你可以通过 size 参数来设置头像的尺寸：
ActerAvatar(
name: 'John Doe',
size: 60,
)
自定义背景颜色
如果你不想使用随机颜色，可以通过 backgroundColor 参数来设置背景颜色：
ActerAvatar(
name: 'John Doe',
backgroundColor: Colors.blue,
)
自定义文字颜色
通过 textColor 参数可以设置文字的颜色：
ActerAvatar(
name: 'John Doe',
textColor: Colors.white,
)
自定义字体大小
通过 fontSize 参数可以设置字体大小：
ActerAvatar(
name: 'John Doe',
fontSize: 20,
)
自定义形状
默认情况下，ActerAvatar 生成的是圆形头像。你可以通过 shape 参数将其改为方形：
ActerAvatar(
name: 'John Doe',
shape: ActerAvatarShape.rectangle,
)
4. 完整示例
以下是一个完整的示例，展示了如何使用 ActerAvatar 来生成个性化头像：
import 'package:flutter/material.dart';
import 'package:acter_avatar/acter_avatar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ActerAvatar Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ActerAvatar(
name: 'John Doe',
size: 60,
),
SizedBox(height: 20),
ActerAvatar(
name: 'Jane Smith',
size: 80,
backgroundColor: Colors.green,
textColor: Colors.white,
),
SizedBox(height: 20),
ActerAvatar(
name: 'Alice',
size: 100,
shape: ActerAvatarShape.rectangle,
),
],
),
),
),
);
}
}