云信 IM UIKit 是基于 NIM SDK（网易云信 IM SDK）开发的一款即时通讯 UI 组件库，包括聊天、会话、搜索、群管理等组件。本文介绍如何快速跑通 IM UIKit 的集成流程。

前提条件

在开始集成 IM UIKit 前，请确保：

• 已在云信控制台创建应用，获取 App Key。
• 已注册云信 IM 账号，获取 accid 和 token。
• 准备如下开发环境/工具：
  • Flutter-dart 3.0.0 及以上版本。
  • Android 端开发：
    • Android Studio Bumblebee。
    • App 要求 Android 5.0 API 21 及以上版本设备。
    • 1.6.10以上版本的 kotlin-gradle-plugin。
  • iOS 端开发：
    • Xcode 11.0 及以上版本。
    • App 要求 iOS 11.0 以上版本设备。
    • 请确保您的项目已设置有效的开发者签名。

实现流程

步骤1：按需导入组件

根据业务需要，在您的项目的 pubspec.yaml 中，以添加依赖的形式添加相应的 IM UIKit 组件。

例如，需要通讯录功能和会话列表功能，可添加 nim_contactkit_ui: ^1.0.0 和 nim_conversationkit_ui: ^1.0.0。

yamldependencies:
    # 通讯录功能
    nim_contactkit_ui: ^1.0.0
    # 会话列表功能组件
    nim_conversationkit_ui: ^1.0.0
    # 群组功能组件
    nim_teamkit_ui: ^1.0.0
    # 聊天功能组件
    nim_chatkit_ui: ^1.0.0
    # 搜索功能组件
    nim_searchkit_ui: ^1.0.0

• 各组件相互独立，添加或删除均不影响项目编译。
• 上述示例代码中的1.0.0为版本号，仅用于示例。建议使用最新版本。
• 更多组件导入说明，请参见组件导入。

步骤2：初始化

1. 在应用的根Widget中，初始化您所使用到的模块组件，init方法主要做了模块路由注册。

2. 配置路由表IMKitRouter.instance.routes到MaterialApp的routes参数。

3. 在根组件的MaterialApp中配置supportedLocales为IMKitClient.supportedLocales。

4. 将使用到的模块多语言delegate配置到localizationsDelegates。

   dartclass MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     void initPlugins() {
       ChatKitClient.init();
       TeamKitClient.init();
       ConversationKitClient.init();
       ContactKitClient.init();
       SearchKitClient.init();
     }
   
     // This widget is the root of your application.
     @override
     Widget build(BuildContext context) {
       // 1. 初始化您使用到的模块组件
       initPlugins();
       return MaterialApp(
         title: 'IM UIKit',
         // 2. 添加路由表配置
         routes: IMKitRouter.instance.routes,
         // 3. 添加支持的语言
         supportedLocales: IMKitClient.supportedLocales,
         // 4. 添加模块支持
         localizationsDelegates: [
           CommonUILocalizations.delegate,
           ConversationKitClient.delegate,
           ChatKitClient.delegate,
           ContactKitClient.delegate,
           TeamKitClient.delegate,
           SearchKitClient.delegate,
           ...GlobalMaterialLocalizations.delegates,
         ],
         home: const MyHomePage(title: 'IM UIKit'),
       );
     }
   }
   

5. 准备好 APP Key，并在 IM UIKit 项目主页的 initState 中添加如下代码。

   dart// 这里以Android平台为例，填入APPKEY
   NIMAndroidSDKOptions options = NIMAndroidSDKOptions(appKey: "APP KEY");
   IMKitClient.init(appKey, options).then((success) {
       if (success) {
           // 初始化成功
       } else {
           // 初始化失败
       }
   }));
   

   更多初始化说明，请参见初始化。

步骤3：登录

调用IMKitClient类中的如下方法进行登录。

方法名	参数	说明
loginIM	NIMLoginInfo	登录IM

调用登录的方法时，将如下示例代码中的 accId 和 token 分别替换为您的云信账号 ID （即 accId）和 Token。

示例代码如下：

• 登录 IM

dartIMKitClient.loginIM(NIMLoginInfo(account: "accId", token: "token")).then((success) {
    if (success) {
        //登录成功
    } else {
        //登录失败
    }
});

步骤4：界面搭建

以搭建会话列表界面为例，您可以直接创建ConversationPage组件到您的应用中，还可以选择传入onUnreadCountChanged接口以获取当前未读消息数量信息。

示例代码如下：

dartclass _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ConversationPage(
        onUnreadCountChanged: (unreadCount) {
          setState(() {
            chatUnreadCount = unreadCount;
          });
        },
      ),
    );
  }
}

会话列表界面最终搭建效果参考图如下：

界面集成详情

IM UIKit 中提供的常用业务场景界面及相关详细集成说明如下：

界面	所属组件	描述
ConversationPage	nim_conversationkit_ui	会话列表界面（创建或者跳转到该界面需要传入参数，详见集成会话列表界面
ContactPage	nim_contactkit_ui	通讯录界面 （创建或者跳转到该界面需要传入参数，详见集成通讯录界面
ChatPage	nim_chatkit_ui	单聊/群聊会话界面（创建或者跳转到该界面需要传入参数，详见集成会话消息界面）

后续步骤

为保障通信安全，如果您在调试环境中的使用的是云信控制台生成的 IM 账号（测试用），请确保在后续的正式生产环境中，将其替换为通过 IM 服务端 API 生成的正式 IM 账号。