Flutter头像文本组合插件easy_avatar_text的使用
Flutter头像文本组合插件easy_avatar_text的使用
在 Flutter 应用程序中提供头像相关问题的解决方案的插件。
作者: Jcak Lee
电子邮件: 291148484@163.com
主页: http://thispage.tech:9680/jclee1995/flutter-easy-avatar
仓库: https://github.com/jacklee1995/flutter_easy_avatar
问题追踪器: https://github.com/jacklee1995/flutter_easy_avatar/issues
获取开始
最简单的例子是使用默认头像及默认参数：
const Avatar()
其运行效果如下：
你也可以指定一些头像参数，但是如果你指定一个错误的头像地址，将自动地使用默认头像，例如：
Avatar(
size: 100,
backgroundColor: Colors.indigo,
borderRadius: 40,
padding: EdgeInsets.all(20),
image: 'https://example.com/avatar.jpg',
),
其运行效果如下：
如果要可以设置一个真实的网络图片URL作为头像，则它必须以http开头，例如：
const Avatar(
size: 200,
borderRadius: 100,
image:
'https://profile-avatar.csdnimg.cn/bb869bb0b79b48209c6206043890c985_qq_28550263.jpg',
),
其运行效果如下：
哦，这就是我了。一个开源社区的活跃用户！
其实你还可以使用动图，这没关系的：
const Avatar(
size: 200,
margin: EdgeInsets.all(6),
borderRadius: 60,
image:
'https://github.githubassets.com/images/mona-loading-dimmed.gif',
),
其运行效果如下：
如果头像本身是透明背景的，可以看到默认背景色 或 背景图片。并且，你还可以为你的头像添加外边框，例如：
Avatar(
size: 200,
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.all(10),
borderRadius: 80,
backgroundColor: Colors.white, // 如不设置，则为灰色
// 可以为你的头像添加边框
border: Border.all(
color: const Color.fromARGB(255, 0, 0, 0),
width: 6.0,
style: BorderStyle.solid,
strokeAlign: BorderSide.strokeAlignInside,
),
image:
'https://gitee.com/jacklee1995/example-pictures/raw/master/asian/asian-girl-avatar.png',
),
其运行效果如下：
接下来是一个使用网络图片作为背景图的例子，这个网络图片将覆盖背景颜色效果：
const Avatar(
size: 200,
margin: EdgeInsets.all(10),
borderRadius: 80,
backgroundImage:
'https://gitee.com/jacklee1995/example-pictures/raw/master/scenery/jonathanvasquez8950_scenery_2f6031d1-c4fe-41d7-8abf-d1c9c40d9981.png',
image:
'https://gitee.com/jacklee1995/example-pictures/raw/master/asian/asian-girl-avatar.png',
),
其运行效果如下：
下面我们玩一点特效——人物出框。
Avatar 类提供了一个中间层边框属性 interlayerBorder，通过该属性而不是 border 属性设置的边框将帮助你完成人物出框的效果。示例代码如下：
Avatar(
size: 200,
interlayerBorder: Border.all(
color: const Color.fromARGB(255, 255, 251, 3),
width: 20.0,
style: BorderStyle.solid,
strokeAlign: BorderSide.strokeAlignInside,
),
// margin: const EdgeInsets.all(6),
borderRadius: 100,
backgroundImage:
'https://gitee.com/jacklee1995/example-pictures/raw/master/scenery/jonathanvasquez8950_scenery_2f6031d1-c4fe-41d7-8abf-d1c9c40d9981.png',
image: 'assets/asian-boy-avatar.png', // 也可以使用本地图片资源
)
其效运行果如下：
文字头像（Text Avatar）
从 v2.0.0 开始，添加了新的图层用于显示文字，但是必须使用 textMode 参数开启文字模式。如果没有指定文本，将显示为“?”号，否则显示为使用 text 参数所指定的文本。
例如：
const Avatar(textMode: true),
其运行效果如下：
const Avatar(
textMode: true, // 文字模式必须启用此参数
text: 'Lee', // 默认仅仅使用一个字符
),
其运行效果如下：
如果文本由多个单词构成，需要通过 wordsCount 参数指定单词的数量以显示多个字符：
const Avatar(
textMode: true,
text: 'Jun Cai',
borderRadius: 40,
wordsCount: 2, // 单词数量，用于显示多个单词的首字符
),
其运行效果如下：
API 编程接口
class Avatar
此类是一个显示带有各种自定义选项的头像的组件。
该组件允许您显示具有自定义尺寸、边框半径、背景颜色和可选背景图像的头像。可以为头像指定网络和本地图像。
Example Usage 示例
Avatar({
Key? key,
double size = 100,
double borderRadius = 50,
String? backgroundImage,
Color? backgroundColor,
String? image = '',
String text = '?',
EdgeInsetsGeometry margin = EdgeInsets.zero,
EdgeInsetsGeometry padding = EdgeInsets.zero,
Border? interlayerBorder,
Border? border,
bool textMode = false,
bool upperCase = false,
int? wordsCount,
File? fileImage,
})
Constructor 构造函数
默认构造函数 Avatar
创建Avatar组件。
size(double, optional): 头像的尺寸。默认为100。borderRadius(double, optional): 头像的边框半径。默认为50。backgroundImage(String, optional): 头像的背景图像的URL。backgroundColor(Color, optional): 如果没有提供backgroundImage，则设置头像的背景颜色。默认为灰色。image(String, required): 用于设置头像的图像，可以是网络URL或本地资源路径。text(String, required): 文字头像的文本。textMode(bool, optional): 是否启用文本头像模式，默认为 false。upperCase(bool, optional): 文本转大写，默认为 false。wordsCount(int, optional): 单词数量，用于显示多个单词的首字符。margin(EdgeInsetsGeometry, optional): 控制整个头像周围的边距。默认没有边距。padding(EdgeInsetsGeometry, optional): 应用于头像内部，仅影响头像图像的填充。默认没有填充。border(Border, optional): 头像的边框。interlayerBorder(Border, optional): 头像的中间层边框。
设备文件支持
从v3.0.0开始，使用Avatar的fileImage参数来指定一个本地文件对象。该参数旨在方便配合选择本地文件上传。比如，基于Avatar组件封装一个自定义头像组件：
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:easy_avatar/easy_avatar.dart';
import 'package:get/state_manager.dart';
import '../controllers/my_avatar_controller.dart';
class UserAvatar extends GetView<MyAvatarController> {
final double size;
final Function()? onTap;
final Function()? onDoubleTap;
final Function()? onLongPress;
const UserAvatar({
super.key,
this.size = 76,
this.onTap,
this.onDoubleTap,
this.onLongPress,
});
[@override](/user/override)
Widget build(BuildContext context) {
return Obx(() {
final File? imageFile = controller.userImage.value;
return GestureDetector(
onTap: onTap,
onDoubleTap: onDoubleTap,
onLongPress: onLongPress,
child: Avatar(
fileImage: imageFile,
image: controller.avatarImageStr.value,
size: size,
borderRadius: 75,
),
);
});
}
}
在控制器处，可以定义一个setupImage方法来读取本地头像：
class MyAvatarController extends GetxController{
// ...
/// 注意使用Rxn来管理可空的File
var userImage = Rxn<File>();
/// 表示图像资源值的字符串
final Rxn<String> avatarImageStr = Rxn<String>(null);
/// 从图库选择图像并更新UI的异步方法。
Future<void> setupImage() async {
final picker = ImagePicker();
final pickedFile = await picker.pickImage(source: ImageSource.gallery);
if (pickedFile != null) {
userImage.value = File(pickedFile.path); // 更新图像文件
}
avatarImageStr.value = null;
}
}
使用有选择本地文件头像功能时，可以这样调用：
UserAvatar(
onDoubleTap: () => controller.setupImage(),
onTap: () => Get.toNamed('/set_avatrtar'),
),
注：Version 3.0.0的file image feature does not directly support selecting SVG images yet. This will be improved in future versions with updates to file_picker.
需要指出的是，你可以同时指定 image参数和 fileImage参数，但是如果 image的值非 null，则使用的 image参数指定的头像。也就是说，通过 fileImage参数在 image为 null的条件下生效。
主要变化
v2.0.0主要变化
从 v2.0.0 开始：
- 删除了
Avatar类的width属性和height属性，取而代之的为size属性。 - 新增了文字头像功能。
v3.0.0主要变化
从 v3.0.0 开始：
- 添加了 SVG 支持。
- 已实现图像层的缓存。对于 SVG 图像，存储位置为应用目录。
问题追踪器
你可以在 Github 上报告错误：https://github.com/jacklee1995/flutter_easy_avatar/issues
许可证
本项目根据MIT许可证许可 - 有关详细信息，请参阅LICENSE文件。
完整示例
以下是一个完整的示例代码，展示了如何使用 easy_avatar 插件来创建一个包含文字头像的组件：
import 'package:flutter/material.dart';
import 'package:easy_avatar/easy_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('Easy Avatar Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 使用默认参数的头像
Avatar(),
SizedBox(height: 20),
// 自定义参数的头像
Avatar(
size: 100,
backgroundColor: Colors.indigo,
borderRadius: 40,
padding: EdgeInsets.all(20),
image: 'https://example.com/avatar.jpg',
),
SizedBox(height: 20),
// 网络图片作为头像
Avatar(
size: 200,
borderRadius: 100,
image:
'https://profile-avatar.csdnimg.cn/bb869bb0b79b48209c6206043890c985_qq_28550263.jpg',
),
SizedBox(height: 20),
// 动图作为头像
Avatar(
size: 200,
margin: EdgeInsets.all(6),
borderRadius: 60,
image:
'https://github.githubassets.com/images/mona-loading-dimmed.gif',
),
SizedBox(height: 20),
// 带有边框的头像
Avatar(
size: 200,
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.all(10),
borderRadius: 80,
backgroundColor: Colors.white,
border: Border.all(
color: const Color.fromARGB(255, 0, 0, 0),
width: 6.0,
style: BorderStyle.solid,
strokeAlign: BorderSide.strokeAlignInside,
),
image:
'https://gitee.com/jacklee1995/example-pictures/raw/master/asian/asian-girl-avatar.png',
),
SizedBox(height: 20),
// 带有背景图片的头像
Avatar(
size: 200,
margin: EdgeInsets.all(10),
borderRadius: 80,
backgroundImage:
'https://gitee.com/jacklee1995/example-pictures/raw/master/scenery/jonathanvasquez8950_scenery_2f6031d1-c4fe-41d7-8abf-d1c9c40d9981.png',
image:
'https://gitee.com/jacklee1995/example-pictures/raw/master/asian/asian-girl-avatar.png',
),
SizedBox(height: 20),
// 特效：人物出框
Avatar(
size: 200,
interlayerBorder: Border.all(
color: const Color.fromARGB(255, 255, 251, 3),
width: 20.0,
style: BorderStyle.solid,
strokeAlign: BorderSide.strokeAlignInside,
),
borderRadius: 100,
backgroundImage:
'https://gitee.com/jacklee1995/example-pictures/raw/master/scenery/jonathanvasquez8950_scenery_2f6031d1-c4fe-41d7-8abf-d1c9c40d9981.png',
image: 'assets/asian-boy-avatar.png', // 也可以使用本地图片资源
),
SizedBox(height: 20),
// 文字头像
Avatar(
textMode: true,
text: 'L',
),
SizedBox(height: 20),
// 多个单词的文字头像
Avatar(
textMode: true,
text: 'Jun Cai',
borderRadius: 40,
wordsCount: 2, // 单词数量，用于显示多个单词的首字符
),
],
),
),
),
);
}
}
更多关于Flutter头像文本组合插件easy_avatar_text的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter头像文本组合插件easy_avatar_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
easy_avatar_text 是一个用于 Flutter 的插件，它可以帮助你轻松地创建带有头像和文本的组合 Widget。这个插件通常用于显示用户头像和相关的文本信息，比如用户名、状态等。
安装
首先，你需要在 pubspec.yaml 文件中添加 easy_avatar_text 插件的依赖：
dependencies:
flutter:
sdk: flutter
easy_avatar_text: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装插件。
基本用法
easy_avatar_text 提供了一个 EasyAvatarText Widget，你可以通过它来创建一个带有头像和文本的组合。
import 'package:flutter/material.dart';
import 'package:easy_avatar_text/easy_avatar_text.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('EasyAvatarText Example'),
),
body: Center(
child: EasyAvatarText(
image: NetworkImage('https://via.placeholder.com/150'), // 头像图片
text: 'John Doe', // 文本
textStyle: TextStyle(fontSize: 20, color: Colors.black), // 文本样式
spacing: 10, // 头像和文本之间的间距
),
),
),
);
}
}
void main() => runApp(MyApp());
参数说明
image: 头像图片，可以是NetworkImage、AssetImage或其他ImageProvider。text: 要显示的文本。textStyle: 文本的样式，可以自定义字体大小、颜色等。spacing: 头像和文本之间的间距。radius: 头像的圆角半径，默认为null，即圆形头像。backgroundColor: 头像的背景颜色，默认为Colors.grey。textPadding: 文本的内边距，默认为EdgeInsets.zero。
自定义头像形状
你可以通过设置 radius 参数来改变头像的形状。如果设置为 null，头像将会是圆形的；如果设置为 BorderRadius.circular(10)，头像将会是圆角矩形。
EasyAvatarText(
image: NetworkImage('https://via.placeholder.com/150'),
text: 'John Doe',
radius: BorderRadius.circular(10), // 圆角矩形头像
),
自定义背景颜色
你可以通过设置 backgroundColor 参数来改变头像的背景颜色。
EasyAvatarText(
image: NetworkImage('https://via.placeholder.com/150'),
text: 'John Doe',
backgroundColor: Colors.blue, // 背景颜色为蓝色
),
自定义文本内边距
你可以通过设置 textPadding 参数来调整文本的内边距。
EasyAvatarText(
image: NetworkImage('https://via.placeholder.com/150'),
text: 'John Doe',
textPadding: EdgeInsets.all(8), // 文本内边距为8
),