Flutter用户信息展示插件profile_view的使用
Flutter用户信息展示插件profile_view的使用
profile_view 是一个Flutter插件，用于以Instagram风格展示用户头像。它可以帮助开发者快速实现用户头像的展示功能，支持圆形和带圆角的矩形图片。
快速开始
只需提供图片给 ProfileView，它将自动处理其余的工作。
使用方法
1. 圆形图片（默认）
ProfileView(
image: NetworkImage(
"https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg"
),
),
image: 用于指定要显示的图片，可以是网络图片或本地图片。
2. 带圆角的矩形图片
ProfileView(
height: 100, // 设置图片的高度
width: 100, // 设置图片的宽度
circle: false, // 设置为false以启用矩形模式
borderRadius: 10, // 设置圆角半径
image: NetworkImage(
"https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg"
),
),
height和width: 分别设置图片的高度和宽度。circle: 设置为false时，图片将以矩形形式显示。borderRadius: 设置矩形图片的圆角半径。
示例代码
以下是一个完整的示例代码，展示了如何在Flutter应用中使用 profile_view 插件来展示用户信息。
import 'package:flutter/material.dart';
import 'package:profile_view/profile_view.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Profile View',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const ProfilePage(),
);
}
}
class ProfilePage extends StatelessWidget {
const ProfilePage({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
const Expanded(flex: 2, child: _TopPortion()),
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Text(
"Imtiaz Ahmad",
style: Theme.of(context)
.textTheme
.headline6
?.copyWith(fontWeight: FontWeight.bold),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton.extended(
onPressed: () {},
heroTag: 'follow',
elevation: 0,
label: const Text("Follow"),
icon: const Icon(Icons.person_add_alt_1),
),
const SizedBox(width: 16.0),
FloatingActionButton.extended(
onPressed: () {},
heroTag: 'message',
elevation: 0,
backgroundColor: Colors.red,
label: const Text("Message"),
icon: const Icon(Icons.message_rounded),
),
],
),
const SizedBox(height: 16),
const _ProfileInfoRow(),
const SizedBox(height: 16),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ProfileView(
image: NetworkImage(
"https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg"),
),
ProfileView(
image: NetworkImage(
"https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg"),
),
ProfileView(
height: 100,
width: 100,
circle: false,
borderRadius: 10,
image: NetworkImage(
"https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg"),
),
],
)
],
),
),
),
],
),
);
}
}
class _ProfileInfoRow extends StatelessWidget {
const _ProfileInfoRow({Key? key}) : super(key: key);
final List<ProfileInfoItem> _items = const [
ProfileInfoItem("Posts", 900),
ProfileInfoItem("Followers", 120),
ProfileInfoItem("Following", 200),
];
[@override](/user/override)
Widget build(BuildContext context) {
return Container(
height: 80,
constraints: const BoxConstraints(maxWidth: 400),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: _items
.map((item) => Expanded(
child: Row(
children: [
if (_items.indexOf(item) != 0) const VerticalDivider(),
Expanded(child: _singleItem(context, item)),
],
)))
.toList(),
),
);
}
Widget _singleItem(BuildContext context, ProfileInfoItem item) => Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
item.value.toString(),
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
Text(
item.title,
style: Theme.of(context).textTheme.caption,
)
],
);
}
class ProfileInfoItem {
final String title;
final int value;
const ProfileInfoItem(this.title, this.value);
}
class _TopPortion extends StatelessWidget {
const _TopPortion({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Stack(
fit: StackFit.expand,
children: [
Container(
margin: const EdgeInsets.only(bottom: 50),
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [Color(0xff0043ba), Color(0xff006df1)]),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(50),
)),
),
const Align(
alignment: Alignment.topCenter,
child: Padding(
padding: EdgeInsets.only(top: 35.0),
child: Text(
"ProfileView Example",
style: TextStyle(color: Colors.white, fontSize: 22),
),
)),
Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: 150,
height: 150,
child: Stack(
fit: StackFit.expand,
children: [
const ProfileView(
image: NetworkImage(
"https://img.freepik.com/free-photo/assortment-pieces-cake_114579-28235.jpg",
),
),
Positioned(
bottom: 0,
right: 0,
child: CircleAvatar(
radius: 20,
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
child: Container(
margin: const EdgeInsets.all(8.0),
decoration: const BoxDecoration(
color: Colors.green, shape: BoxShape.circle),
),
),
),
],
),
),
),
],
);
}
}
更多关于Flutter用户信息展示插件profile_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter用户信息展示插件profile_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用profile_view插件来展示用户信息的代码示例。profile_view是一个流行的Flutter插件，用于方便地展示用户个人资料信息。
首先，确保你已经在pubspec.yaml文件中添加了profile_view依赖：
dependencies:
flutter:
sdk: flutter
profile_view: ^最新版本号 # 请替换为当前最新版本号
然后运行flutter pub get来获取依赖。
接下来，你可以在你的Flutter应用中按照以下方式使用profile_view插件：
import 'package:flutter/material.dart';
import 'package:profile_view/profile_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Profile View Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ProfileViewScreen(),
);
}
}
class ProfileViewScreen extends StatelessWidget {
final UserProfile userProfile = UserProfile(
name: 'John Doe',
username: '@johndoe',
bio: 'Software Developer | Flutter Enthusiast',
imageUrl:
'https://via.placeholder.com/150', // 替换为实际的用户图片URL
followers: 123,
following: 45,
posts: 78,
socialMediaLinks: [
SocialMediaLink(
iconData: Icons.facebook,
url: 'https://facebook.com/johndoe',
),
SocialMediaLink(
iconData: Icons.twitter,
url: 'https://twitter.com/johndoe',
),
SocialMediaLink(
iconData: Icons.linkedin,
url: 'https://linkedin.com/in/johndoe',
),
],
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profile View Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: ProfileView(
profile: userProfile,
backgroundColor: Colors.white,
borderRadius: 16,
actions: <Widget>[
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
// 打开编辑用户资料的页面
print('Edit Profile Pressed');
},
),
IconButton(
icon: Icon(Icons.message),
onPressed: () {
// 打开聊天页面
print('Message Pressed');
},
),
],
onFollowButtonPressed: () {
// 处理关注按钮点击事件
print('Follow/Unfollow Button Pressed');
},
),
),
);
}
}
class UserProfile {
final String name;
final String username;
final String bio;
final String imageUrl;
final int followers;
final int following;
final int posts;
final List<SocialMediaLink> socialMediaLinks;
UserProfile({
required this.name,
required this.username,
required this.bio,
required this.imageUrl,
required this.followers,
required this.following,
required this.posts,
required this.socialMediaLinks,
});
}
class SocialMediaLink {
final IconData iconData;
final String url;
SocialMediaLink({required this.iconData, required this.url});
}
代码解释：
-
依赖导入：
- 导入
flutter和profile_view包。
- 导入
-
主应用：
- 使用
MaterialApp作为主应用，并设置标题和主题。
- 使用
-
用户资料屏幕：
- 创建一个
UserProfile对象，包含用户的基本信息。 - 使用
ProfileView小部件展示用户资料。 - 在
ProfileView中，你可以设置背景颜色、边框半径、操作按钮（例如编辑和消息按钮），以及关注按钮的点击事件。
- 创建一个
-
用户资料和社交媒体链接模型：
- 定义
UserProfile和SocialMediaLink类来存储用户资料和社交媒体链接的信息。
- 定义
请注意，profile_view插件的实际API可能会有所不同，因此请参考其官方文档和最新版本以获取最准确的信息。如果你遇到任何问题或需要进一步的自定义，请查阅该插件的官方文档或GitHub仓库。
