Flutter圆形徽章头像插件circular_badge_avatar的使用
Flutter圆形徽章头像插件circular_badge_avatar的使用
描述
一个有用的Flutter包，用于制作带有徽章或不带徽章的圆形头像。此控件将减少为项目编写可调整圆形徽章头像代码的工作量。
特性
- 可以更改圆形背景颜色
- 可以设置自己的字母或数据库名称/用户名。它会自动拆分前两位并显示为大写字母而不是图片
- 可以更改徽章颜色
- 可以设置自己的占位符图片
- 可以调整图像选择图标的位置（顶部或底部）
- 有很多其他选项供您选择和使用
开始使用
只需在依赖项中添加以下内容：
circular_badge_avatar: ^0.1.4
然后在需要使用该控件的地方导入以下行：
import 'package:circular_badge_avatar/circular_badge_avatar.dart';
如果需要手动导入辅助类，请复制并粘贴以下代码到导入部分。您可以使用这两个辅助类中的任何一个。
import 'package:circular_badge_avatar/helper/image_picker_dialog.dart';
import 'package:circular_badge_avatar/helper/bottomsheet_image_picker.dart';
所有参数都是可选的。您可以覆盖所有这些参数。
/// [圆圈属性]
String centeralText;
Color centeralTextColor;
double centeralTextSize;
Color circleBgColor;
Color circleBorderColor;
double circleBorderWidth;
double circleBorderRadius;
String assetImage;
String networkPlaceholderImage;
String networkImage;
XFile imagePath;
String imageString;
/// [图标属性]
IconData icon;
double iconSize;
Color iconBgColor;
Color iconColor;
Color iconBorderColor;
double iconBorderWith;
double iconPosition;
VoidCallback iconOnTap;
bool needImagePickerIcon;
使用示例
请查看示例文件夹中的/example来了解更多信息。
示例输出
CircularBadgeAvatar
这个控件允许您使用颜色、文本或资产图片、网络图片、Firebase图片路径等对圆形徽章头像进行各种操作。
请悬停CircularBadgeAvatar以查看更多可用参数
悬停CircularBadgeAvatar可以看到更多可用参数。
示例代码
import 'dart:developer';
import 'package:circular_badge_avatar/circular_badge_avatar.dart';
import 'package:circular_badge_avatar/helper/bottomsheet_image_picker.dart';
import 'package:circular_badge_avatar/helper/image_picker_dialog.dart';
import 'package:circular_badge_avatar/helper/show_snackbar.dart';
import 'package:circular_badge_avatar/helper/show_toast.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Circular Badge Avatar',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const ExampleScreen(),
);
}
}
class ExampleScreen extends StatefulWidget {
const ExampleScreen({Key? key}) : super(key: key);
[@override](/user/override)
State<ExampleScreen> createState() => _ExampleScreenState();
}
class _ExampleScreenState extends State<ExampleScreen> {
/// [Xfile 或者转换 XFile 成字符串]
String? selectedImagePath1;
XFile? imageSource1;
XFile? imageSource2;
[@override](/user/override)
Widget build(BuildContext context) {
ToastContext().init(context);
return Scaffold(
appBar: AppBar(
title: const Text("Circular Badge Examples"),
centerTitle: true,
),
body: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 20),
SizedBox(
height: 110,
child: CircularBadgeAvatar(
iconPosition: 10, // 调整您的图标位置
icon: Icons.info_outline, // 替换为您喜欢的图标
iconSize: 15, // 调整图标大小
centeralText: "Muka Ahmed",
/// [如果您想使用资产图片]
// assetImage: "assets/images/asset_image.png",
iconOnTap: () {
showSuccessSnackBar(message: "An example of info circular badge avater", context: context);
},
),
),
const SizedBox(height: 20),
SizedBox(
height: 110,
child: CircularBadgeAvatar(
needImagePickerIcon: true, // 如果决定不显示拾取器图标且用户无法选择任何图片 [needImagePickerIcon: false]
// 它的图片作为字符串但实际类型是文件。 所以正常的资产字符串将不会在这里使用
// 图片来自 Firebase、File、XFile 路径可以在这里使用
imageString: selectedImagePath1,
iconOnTap: () async {
final file = await showDialog<XFile>(
context: context,
builder: (context) {
return const ImagePickerDialogBox(
///title: Text("Pick your"),
//titleText: "Please choose your media",
);
},
);
setState(() {
selectedImagePath1 = file!.path; // e.g: 你需要设置路径
});
},
),
),
const SizedBox(height: 20),
SizedBox(
height: 110,
child: CircularBadgeAvatar(
imagePath: imageSource1, // imagePath 只接受 XFile
iconOnTap: () async {
final file = await showModalBottomSheet<XFile>(
context: context,
builder: (context) {
return const BottomSheetImagePicker(
///title: Text("Pick your"),
//titleText: "Please choose your media",
);
},
);
setState(() {
imageSource1 = file!; // e.g: 你需要设置路径
});
},
),
),
const SizedBox(height: 20),
SizedBox(
height: 110,
child: CircularBadgeAvatar(
imagePath: imageSource2,
iconOnTap: () async {
final file = await showDialog<XFile>(
context: context,
builder: (context) {
return const ImagePickerDialogBox(
///title: Text("Pick your"),
titleText: "Please choose your media",
);
},
);
if (file != null) {
/// [先挑选一张图片，然后将其转换为您想要的格式]
/// [imageSource] 是一个 XFile。 因此可以直接发送 XFile 进行查看
imageSource2 = file;
// selectedImagePath1 = file.path;
log("Seding a string => $selectedImagePath1");
log("Seding a XFile => ${imageSource1?.path}");
if (mounted) {
showSuccessSnackBar(
message: "Image upload successfully!",
context: context,
);
}
} else {
log("file is null");
}
setState(() {});
},
),
),
const SizedBox(height: 50),
/// [只是一个间隔]
///
],
),
),
),
),
);
}
}
更多关于Flutter圆形徽章头像插件circular_badge_avatar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
