Flutter IMKit 快速开始
本页在 5 个步骤内完成 Flutter 端 IMKit 接入:先接入 IMLib,再初始化门面,最后挂载会话列表与会话页。IMKit 只消费 IMLib 的公开数据,不重复实现通信能力。
- 接入 IMLib
按 IMLib 快速开始 完成初始化与连接;IMKit 不重复建立连接。
- 导入 IMKit
按「导入 SDK」安装依赖;只依赖 impaas_imlib 公开 API;不得依赖 http/websocket 直接访问服务端
- 初始化门面
初始化 IMLib 客户端并连接,然后创建 IMKit 门面(或调用静态 init);门面持有主题、语言与组件实例。
- 挂载会话列表
传入 conversations 与交互回调;会话数据来自 IMLib 的 getConversationList 与 CONVERSATION 事件。
- 挂载会话页与输入区
传入 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 get3. 初始化门面
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),
)