flutter_im_list

flutter_im_list is a high-performance, lightweight Flutter chat list package. It can help you quickly create a WeChat-like chat list effect.

Content

• Screenshots
• Examples
• Video tutorial
• Getting started
• API
• Contribution

Screenshots

Overall	Long press	Inputting	GIF

Examples

• Examples

Video tutorial

Welcome to learn and communicate through Video tutorial.

Getting started

Step 1: Add dependencies

Run in the project root directory:

flutter pub add flutter_im_list

Step 2: Initialize ChatController

@overridevoidinitState() {
super.initState();
chatController =ChatController(
initialMessageList: _messageList,
timePellet:60,
scrollController:ScrollController());
}

Step 3: Add ChatList to the layout

@overrideWidgetbuild(BuildContext context) {
returnScaffold(
appBar:AppBar(
title:Text(widget.title),
),
body:ChatList(
chatController: chatController,
));
}

Step 4: Set initialization data

finalList<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"),
];

If not, you can assign _messageList to []。

To learn more see Video tutorial

API

IChatController

abstractclassIChatController {
/// Used to add message in message list.voidaddMessage(MessageModel message);
/// Delete message.voiddeleteMessage(MessageModel message);
/// Function for loading data while pagination.voidloadMoreData(List<MessageModel> messageList);
}

ChatController

classChatControllerimplementsIChatController {
/// Represents initial message list in chat which can be add by user.finalList<MessageModel> initialMessageList;
finalScrollController scrollController;
///Provide MessageWidgetBuilder to customize your bubble style.finalMessageWidgetBuilder? messageWidgetBuilder;
///creation time group; unit secondfinalint timePellet;
List<int> pelletShow = [];
ChatController({requiredthis.initialMessageList,
requiredthis.scrollController,
requiredthis.timePellet,
this.messageWidgetBuilder}) {
for (var message in initialMessageList.reversed) {
inflateMessage(message);
}
}
...

ChatList

classChatListextendsStatefulWidget {
/// Provides controller for accessing few function for running chat.finalChatController chatController;
/// The amount of space by which to inset the children.finalEdgeInsetsGeometry? padding;
/// Called when the user taps this part of the material.finalOnBubbleClick? onBubbleTap;
/// Called when the user long-presses on this part of the material.finalOnBubbleClick? onBubbleLongPress;
/// support text selectfinalHiSelectionArea? hiSelectionArea;
constChatList(
{super.key,
requiredthis.chatController,
this.padding,
this.onBubbleTap,
this.onBubbleLongPress,
this.hiSelectionArea});
@overrideState<ChatList> createState() =>_ChatListState();
}

To learn more see Video tutorial

Contribution

Issues are welcome. Please add a screenshot of you bug and a code snippet. Quickest way to solve issue is to reproduce it in one of the examples.

Pull requests are welcome. If you want to change the API or do something big it is best to create an issue and discuss it first.

---

MIT Licensed