Flutter即时通讯列表展示插件flutter_im_list的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter即时通讯列表展示插件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](/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

1 回复

更多关于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 页面显示详细信息。

请注意,ChatModelflutter_im_list 插件中定义的一个模型类,用于传递给 FlutterImList 组件。你需要根据插件的文档确保数据字段正确匹配。

这个示例应该可以帮助你快速上手使用 flutter_im_list 插件来展示即时通讯列表。如果你有更具体的需求或遇到问题,请查阅插件的官方文档或寻求进一步的帮助。

回到顶部