flutter_im_list

flutter_im_list是一个高性能、轻量级的Flutter聊天列表组件。它可以帮助您快速创建一个类似微信的聊天列表效果。

内容

截图

整体 长按 输入中 GIF
flutter_im_list flutter_im_list flutter_im_list flutter_im_list

示例

视频教程.

入门

步骤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或进行重大更改,最好先创建一个问题并进行讨论。


MIT许可

GitHub

查看 Github