Flutter即时通讯列表展示插件flutter_im_list的使用
Flutter即时通讯列表展示插件flutter_im_list
的使用
简介
flutter_im_list
是一个高性能且轻量级的 Flutter 聊天列表包。它可以帮助你快速创建类似于微信的聊天列表效果。
目录
截图
整体效果 | 长按操作 | 输入框 | GIF |
---|---|---|---|
示例
视频教程
欢迎通过视频教程学习和交流。
开始使用
步骤 1: 添加依赖
在项目根目录运行以下命令:
flutter pub add flutter_im_list
步骤 2: 初始化 ChatController
[@override](/user/override)
void initState() {
super.initState();
chatController = ChatController(
initialMessageList: _messageList,
timePellet: 60,
scrollController: ScrollController(),
);
}
步骤 3: 将 ChatList
添加到布局中
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ChatList(
chatController: chatController,
),
);
}
步骤 4: 设置初始化数据
final List<MessageModel> _messageList = [
MessageModel(
id: 1,
content: "介绍下《ChatGPT + Flutter快速开发多端聊天机器人App》",
ownerType: OwnerType.sender,
createdAt: 1696142392000,
avatar: 'https://o.devio.org/images/o_as/avatar/tx18.jpeg',
ownerName: "Jack",
),
MessageModel(
id: 2,
content:
"当前ChatGPT应用如雨后春笋般应运而生,给移动端开发者也带来了极大的机会。本课程将整合ChatGPT与Flutter高级技术,手把手带你从0到1开发一款可运行在多端的聊天机器人App,帮助你抓住机遇,快速具备AI运用能力,成为移动端领域的AI高手。",
ownerType: OwnerType.receiver,
createdAt: 1696142393000,
avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
ownerName: "ChatGPT",
),
];
如果需要,你可以将 _messageList
设为空列表 []
。
API 文档
IChatController
接口
abstract class IChatController {
/// 用于向消息列表中添加消息。
void addMessage(MessageModel message);
/// 删除消息。
void deleteMessage(MessageModel message);
/// 分页加载数据时调用的函数。
void loadMoreData(List<MessageModel> messageList);
}
ChatController
类
class ChatController implements IChatController {
/// 表示初始的消息列表,可以由用户添加。
final List<MessageModel> initialMessageList;
final ScrollController scrollController;
/// 提供 `MessageWidgetBuilder` 来自定义气泡样式。
final MessageWidgetBuilder? messageWidgetBuilder;
/// 创建时间间隔;单位为秒
final int timePellet;
List<int> pelletShow = [];
ChatController({
required this.initialMessageList,
required this.scrollController,
required this.timePellet,
this.messageWidgetBuilder,
}) {
for (var message in initialMessageList.reversed) {
inflateMessage(message);
}
}
...
}
ChatList
类
class ChatList extends StatefulWidget {
/// 提供控制器以访问一些运行聊天的功能。
final ChatController chatController;
/// 子组件的内边距。
final EdgeInsetsGeometry? padding;
/// 当用户点击此材料部分时调用。
final OnBubbleClick? onBubbleTap;
/// 当用户长按此材料部分时调用。
final OnBubbleClick? onBubbleLongPress;
/// 支持文本选择
final HiSelectionArea? hiSelectionArea;
const ChatList({
Key? key,
required this.chatController,
this.padding,
this.onBubbleTap,
this.onBubbleLongPress,
this.hiSelectionArea,
});
[@override](/user/override)
State<ChatList> createState() => _ChatListState();
}
更多关于Flutter即时通讯列表展示插件flutter_im_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter即时通讯列表展示插件flutter_im_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何使用 flutter_im_list
插件来展示即时通讯列表的示例代码。这个示例假定你已经有一个 Flutter 项目,并且已经添加了 flutter_im_list
依赖到你的 pubspec.yaml
文件中。
首先,确保你的 pubspec.yaml
文件包含以下依赖:
dependencies:
flutter:
sdk: flutter
flutter_im_list: ^最新版本号 # 请替换为实际的最新版本号
然后,运行 flutter pub get
来获取依赖。
接下来,在你的 Flutter 项目中,你可以按照以下步骤使用 flutter_im_list
插件来展示即时通讯列表。
1. 导入插件
在你的 Dart 文件中导入 flutter_im_list
插件:
import 'package:flutter_im_list/flutter_im_list.dart';
2. 创建数据模型
通常,即时通讯列表会显示用户的头像、昵称、最后一条消息等内容。你需要创建一个数据模型来表示这些信息。例如:
class Chat {
String avatar;
String name;
String lastMessage;
DateTime lastMessageTime;
bool isOnline;
Chat({
required this.avatar,
required this.name,
required this.lastMessage,
required this.lastMessageTime,
required this.isOnline,
});
}
3. 准备数据
创建一个包含聊天列表数据的列表:
List<Chat> chatList = [
Chat(
avatar: 'https://example.com/avatar1.jpg',
name: 'Alice',
lastMessage: 'Hello!',
lastMessageTime: DateTime.now().subtract(Duration(minutes: 5)),
isOnline: true,
),
Chat(
avatar: 'https://example.com/avatar2.jpg',
name: 'Bob',
lastMessage: 'How are you?',
lastMessageTime: DateTime.now().subtract(Duration(hours: 2)),
isOnline: false,
),
// 添加更多聊天数据...
];
4. 使用 FlutterImList
组件
在你的 Flutter 组件中使用 FlutterImList
来展示聊天列表:
import 'package:flutter/material.dart';
import 'package:flutter_im_list/flutter_im_list.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ChatListScreen(chatList: chatList),
);
}
}
class ChatListScreen extends StatelessWidget {
final List<Chat> chatList;
ChatListScreen({required this.chatList});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Chat List'),
),
body: FlutterImList(
chatList: chatList.map((chat) => ChatModel(
avatar: chat.avatar,
name: chat.name,
lastMessage: chat.lastMessage,
lastMessageTime: chat.lastMessageTime,
isOnline: chat.isOnline,
)).toList(),
onChatClicked: (ChatModel chatModel) {
// 处理点击事件,例如跳转到聊天页面
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ChatScreen(chat: chatModel)),
);
},
),
);
}
}
class ChatScreen extends StatelessWidget {
final ChatModel chat;
ChatScreen({required this.chat});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(chat.name),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
backgroundImage: NetworkImage(chat.avatar),
),
SizedBox(height: 16),
Text('Last Message: ${chat.lastMessage}'),
SizedBox(height: 8),
Text('Last Message Time: ${chat.lastMessageTime.toLocal()}'),
],
),
),
);
}
}
在这个示例中,我们定义了一个 Chat
数据模型来表示聊天信息,并使用 FlutterImList
组件来展示聊天列表。当用户点击某个聊天项时,会跳转到 ChatScreen
页面显示详细信息。
请注意,ChatModel
是 flutter_im_list
插件中定义的一个模型类,用于传递给 FlutterImList
组件。你需要根据插件的文档确保数据字段正确匹配。
这个示例应该可以帮助你快速上手使用 flutter_im_list
插件来展示即时通讯列表。如果你有更具体的需求或遇到问题,请查阅插件的官方文档或寻求进一步的帮助。