Flutter头像显示插件avatar_view的使用
Flutter头像显示插件avatar_view的使用
简介
AvatarView 是一个帮助开发者创建圆形和矩形头像（可以使用网络路径或本地资源路径）的库，包含一些关键特性。
目录
- ✨ 特性
- 圆形头像视图无边框
- 圆形头像视图有边框
- 矩形头像视图无边框
- 矩形头像视图有边框
示例代码
圆形头像视图无边框
AvatarView(
radius: 60, // 头像半径
borderColor: Colors.yellow, // 边框颜色
avatarType: AvatarType.CIRCLE, // 头像类型：圆形
backgroundColor: Colors.red, // 背景颜色
imagePath: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg", // 图片路径
placeHolder: Container( // 占位符
child: Icon(Icons.person, size: 50),
),
errorWidget: Container( // 错误占位符
child: Icon(Icons.error, size: 50),
),
),
圆形头像视图有边框
AvatarView(
radius: 60,
borderWidth: 8, // 边框宽度
borderColor: Colors.yellow,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath: "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
矩形头像视图无边框
AvatarView(
radius: 60,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE, // 头像类型：矩形
backgroundColor: Colors.red,
imagePath: "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
矩形头像视图有边框
AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath: "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
完整示例 Demo
import 'package:avatar_view/avatar_view.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'AvatarView Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'AvatarView Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
/// 1. 圆形头像视图无边框
AvatarView(
radius: 60,
borderColor: Colors.yellow,
isOnlyText: false,
text: Text('C', style: TextStyle(color: Colors.white, fontSize: 50)),
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 2. 圆形头像视图有边框
AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.yellow,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 3. 矩形头像视图无边框
AvatarView(
radius: 60,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 4. 矩形头像视图有边框
AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 5. 文字头像圆形
AvatarView(
radius: 80,
borderWidth: 8,
borderColor: Colors.yellow,
isOnlyText: true,
text: Text('C', style: TextStyle(color: Colors.white, fontSize: 100)),
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 6. 文字头像矩形
AvatarView(
radius: 80,
borderWidth: 8,
borderColor: Colors.yellow,
isOnlyText: true,
text: Text('C', style: TextStyle(color: Colors.white, fontSize: 100)),
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 7. 错误图片URL
AvatarView(
radius: 80,
borderColor: Colors.grey,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath: "1234.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
color: Colors.red,
child: Icon(Icons.error, size: 80),
),
),
SizedBox(height: 50),
/// 1. 圆形头像视图无边框
AvatarView(
radius: 60,
borderColor: Colors.yellow,
isOnlyText: false,
text: Text('C', style: TextStyle(color: Colors.white, fontSize: 50)),
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath: "assets/image_1.png",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 2. 圆形头像视图有边框
AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.yellow,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath: "assets/image_1.png",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 3. 矩形头像视图无边框
AvatarView(
radius: 60,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath: "assets/image_2.png",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 4. 矩形头像视图有边框
AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.grey,
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
imagePath: "assets/image_2.png",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 5. 文字头像圆形
AvatarView(
radius: 80,
borderWidth: 8,
borderColor: Colors.yellow,
isOnlyText: true,
text: Text('C', style: TextStyle(color: Colors.white, fontSize: 100)),
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 6. 文字头像矩形
AvatarView(
radius: 80,
borderWidth: 8,
borderColor: Colors.yellow,
isOnlyText: true,
text: Text('C', style: TextStyle(color: Colors.white, fontSize: 100)),
avatarType: AvatarType.RECTANGLE,
backgroundColor: Colors.red,
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50),
),
),
SizedBox(height: 16),
/// 7. 错误图片URL
AvatarView(
radius: 80,
borderColor: Colors.grey,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath: "1234.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50),
),
errorWidget: Container(
color: Colors.red,
child: Icon(Icons.error, size: 80),
),
),
],
),
),
);
}
}
更多关于Flutter头像显示插件avatar_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter头像显示插件avatar_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，我可以为你提供一个关于如何在Flutter项目中使用avatar_view插件的示例代码。avatar_view插件通常用于显示用户的头像，并支持多种形状和加载状态。以下是一个简单的示例，展示如何在Flutter应用中使用avatar_view插件。
首先，确保你已经在pubspec.yaml文件中添加了avatar_view依赖：
dependencies:
flutter:
sdk: flutter
avatar_view: ^最新版本号 # 请替换为实际的最新版本号
然后，运行flutter pub get来安装依赖。
接下来，你可以在你的Dart文件中使用AvatarView组件。以下是一个完整的示例代码：
import 'package:flutter/material.dart';
import 'package:avatar_view/avatar_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AvatarView Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('AvatarView Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 圆形头像
AvatarView(
size: 100,
imagePath: 'https://example.com/avatar1.jpg', // 替换为实际的图片URL
shape: AvatarShape.circle,
placeholder: Container(
color: Colors.grey[300],
),
errorWidget: Icon(Icons.error),
),
SizedBox(height: 20),
// 圆角方形头像
AvatarView(
size: 100,
imagePath: 'https://example.com/avatar2.jpg', // 替换为实际的图片URL
shape: AvatarShape.roundedRectangle,
borderRadius: BorderRadius.circular(16),
placeholder: Container(
color: Colors.grey[300],
),
errorWidget: Icon(Icons.error),
),
SizedBox(height: 20),
// 椭圆形头像
AvatarView(
size: 100,
imagePath: 'https://example.com/avatar3.jpg', // 替换为实际的图片URL
shape: AvatarShape.oval,
placeholder: Container(
color: Colors.grey[300],
),
errorWidget: Icon(Icons.error),
),
],
),
),
),
);
}
}
在这个示例中，我们展示了如何使用AvatarView组件来显示三种不同形状的头像：圆形、圆角方形和椭圆形。每个AvatarView组件都指定了imagePath来加载网络图片，同时设置了placeholder和errorWidget来处理加载状态和错误情况。
size属性用于设置头像的大小。shape属性用于指定头像的形状。borderRadius属性（仅适用于AvatarShape.roundedRectangle）用于设置圆角的半径。placeholder属性用于指定在图片加载完成之前的占位符。errorWidget属性用于指定在图片加载失败时显示的组件。
你可以根据需要调整这些属性来满足你的应用需求。确保替换imagePath中的URL为实际的图片链接。
