flutter_im_list
flutter_im_list是一个高性能、轻量级的Flutter聊天列表组件。它可以帮助您快速创建一个类似微信的聊天列表效果。
内容
截图
| 整体 | 长按 | 输入中 | GIF |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
示例
视频教程.
入门
步骤1: 添加依赖
在项目根目录下运行
flutter pub add flutter_im_list
步骤2: 初始化ChatController
@override
void initState() {
super.initState();
chatController = ChatController(
initialMessageList: _messageList,
timePellet: 60,
scrollController: ScrollController());
}
步骤3: 将ChatList添加到布局中
@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高手。@https://coding.imooc.com/class/672.html",
ownerType: OwnerType.receiver,
createdAt: 1696142393000,
avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
ownerName: "ChatGPT"),
];
如果不是,您可以将_messageList分配为[]。
欲了解更多信息,请参阅视频教程
API
IChatController
abstract class IChatController {
/// Used to add message in message list.
void addMessage(MessageModel message);
/// Delete message.
void deleteMessage(MessageModel message);
/// Function for loading data while pagination.
void loadMoreData(List<MessageModel> messageList);
}
ChatController
class ChatController implements IChatController {
/// Represents initial message list in chat which can be add by user.
final List<MessageModel> initialMessageList;
final ScrollController scrollController;
///Provide MessageWidgetBuilder to customize your bubble style.
final MessageWidgetBuilder? messageWidgetBuilder;
///creation time group; unit second
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 {
/// Provides controller for accessing few function for running chat.
final ChatController chatController;
/// The amount of space by which to inset the children.
final EdgeInsetsGeometry? padding;
/// Called when the user taps this part of the material.
final OnBubbleClick? onBubbleTap;
/// Called when the user long-presses on this part of the material.
final OnBubbleClick? onBubbleLongPress;
/// support text select
final HiSelectionArea? hiSelectionArea;
const ChatList(
{super.key,
required this.chatController,
this.padding,
this.onBubbleTap,
this.onBubbleLongPress,
this.hiSelectionArea});
@override
State<ChatList> createState() => _ChatListState();
}
欲了解更多信息,请参阅视频教程
贡献
欢迎提交问题。请附上您的bug截图和代码片段。解决问题的最快方法是在其中一个示例中重现它。
欢迎提交拉取请求。如果您想更改API或进行重大更改,最好先创建一个问题并进行讨论。



