Flutter IMKit 快速开始

本页在 5 个步骤内完成 Flutter 端 IMKit 接入:先接入 IMLib,再初始化门面,最后挂载会话列表与会话页。IMKit 只消费 IMLib 的公开数据,不重复实现通信能力。

  1. 接入 IMLib

    按 IMLib 快速开始 完成初始化与连接;IMKit 不重复建立连接。

  2. 导入 IMKit

    按「导入 SDK」安装依赖;只依赖 impaas_imlib 公开 API;不得依赖 http/websocket 直接访问服务端

  3. 初始化门面

    初始化 IMLib 客户端并连接,然后创建 IMKit 门面(或调用静态 init);门面持有主题、语言与组件实例。

  4. 挂载会话列表

    传入 conversations 与交互回调;会话数据来自 IMLib 的 getConversationList 与 CONVERSATION 事件。

  5. 挂载会话页与输入区

    传入 messages / currentUserId / hasMore;发送与已读回调转调 IMLib 对应接口。

1. 接入 IMLib​

IMKit 的所有数据都来自 IMLib 公开接口:连接、会话列表、历史消息、发送、已读回执与未读清零。先完成 IMLib 接入再使用 IMKit。

2. 导入 IMKit​

Flutter pub
# 尚未发布到 pub.dev:pubspec.yaml 用 path 依赖(同时依赖 imlib)
# dependencies:
#   impaas_imkit:
#     path: /path/to/repo/sdk/flutter/imkit
flutter pub get

3. 初始化门面​

Dart (Flutter)
MaterialApp(
  theme: ImkitTheme.light.toThemeData(),
  darkTheme: ImkitTheme.dark.toThemeData(),
  locale: const Locale('zh', 'CN'),
  home: IMKit.start(client: engine),
)

门面:IMKit;门面 IMKit.start(client: ...) 返回可直接放进 MaterialApp.home 的组件;也可单独组合 ConversationListView / ChatView。

4. 挂载会话列表​

Dart (Flutter)
ConversationListView(
  conversations: conversations,
  activeTargetId: 'user2',
  options: const ConversationListOptions(showPinned: true, showUnread: true),
  onSelect: (conversation) => Navigator.of(context).push(MaterialPageRoute(
    builder: (_) => ChatPage(conversation: conversation),
  )),
)

5. 挂载会话页与输入区​

Dart (Flutter)
ChatView(
  conversationType: 1,
  targetId: 'user2',
  messages: messages,
  currentUserId: 'alice',
  hasMore: true,
  showReadCount: true,
  onLoadMore: loadMore,
  onSendText: (text, mention) => send(text),
  onTyping: (typing) => onTyping(typing),
)

下一步​