仅需两步打造多终端适配的全球聊天应用，Flutter IM UIKit带来超便捷开发体验

腾讯云音视频

发布于 2024-05-20 14:14:15

1670

发布于 2024-05-20 14:14:15

随着智能设备的高速迭代，开发者在开发时不得不花费大量精力适配众多设备和平台，同时还要面对低延迟、高可用和跨平台兼容等各种挑战。对于强调随时随地交流的聊天应用等实时通信工具，尤其如此。面对智能手机、平板电脑、PC、物联网终端等众多设备，如何在所有平台上，提供统一、高性能的聊天体验成了一件让开发者头痛的难事。

颠覆传统方案

快速构建多端适配的高质量聊天应用

传统的开发方案是为每个设备和平台单独定制对应的应用程序，这无疑辉大幅增加开发成本和时间。基于Web的解决方案虽然为多平台快速部署提供了一个不错的方向，但却往往需要开发者在性能和用户体验方面做出妥协。

随着Flutter架构的推出，这个问题终于看到了解决的曙光。谷歌推出的Flutter框架具备强大的多平台开发能力，允许开发者使用一套代码库为手机、平板、电脑、Web等多个平台构建高质量的应用程序，从而实现跨平台兼容及快速部署。而Flutter IM UIKit则是腾讯云基于Flutter架构推出的一款高性能UI组件库，旨在帮助开发者快速构建高质量的聊天应用。通过使用Flutter IM UIKit，开发者一次开发就可打造多终端适配，且低延迟、高可用的高性能聊天应用。

丰富且领先的产品能力

Flutter IM UIKit核心优势

一套代码，跨平台兼容

支持嵌入式平板设置；
一套代码无缝集成，仅需两步即可实现开发；
全平台支持（手机、平板、PC和网页）。

行业首创，支持物联网终端

灵活控制智能物联网产品，如智能家居系统中的中央控制面板；
简化的嵌入式终端设备操作逻辑；
能够实现跨终端聊天通信，并使用信令消息对物联网设备进行实时、超低延迟的控制，以实现有效的设备管理。

丰富且可定制的UI组件

对话、消息、联系人、语音/视频通话等丰富的场景组件；
提供暗色和亮色模式的定制选项；
全面的聊天功能以及丰富的用户体验特性，如丰富的动画、触觉反馈和现代简约的设计。

多元应用场景

可在全球范围广泛部署

针对200+国家的网络进行了优化；
支持多种语言（包含英语、阿拉伯语、日语、韩语、中文等，并支持添加更多语言）。

可靠且超低延迟的音频/视频传输

延迟低于300毫秒；
在60%弱网络丢包情况下，发送成功率仍可高于99.99%。

专为开发者设计

支持选择性导入组件，模块化打包，支持自动导航；
简化的组件参数设计；
支持全局和组件实例级别的管理；
清晰的代码命名规范和详细的注释。

此外，开发者还可以在GitHub上探索我们更为完善、综合的Demo，以获得更直接、更沉浸式的体验。

轻松上手

Flutter IM UIKit集成指南

在控制台中设置您的应用程序

1. 创建帐户：访问腾讯云控制台，按照提示创建一个帐户。

2. 开始免费试用：在主页上创建一个应用程序，并开始您的免费试用。数据中心请选择最贴近您目标客户的地域。

3. 生成测试用户：在账户管理中创建两个用户（测试帐户）。然后使用UserSig工具为它们创建相应的UserSigs，稍后会用到这些UserSigs。

4. 获取您的SDKAppID：转到应用程序，选择您新创建的应用程序，然后跳转到相应的应用程序概述以找到您的SDKAppID。

此时，控制台设置便已完成。请记下SDKAppID以及两组UserID和UserSig，便于后续使用。

快速集成Flutter IM UIKit

以下步骤为Flutter IM UIKit集成的简要步骤，详细的集成过程，请参阅官网指南（https://www.tencentcloud.com/zh/document/product/1047/58585）。

开始之前，需要您准备好一个Flutter项目或创建一个新项目。你可根据文档指引（https://docs.flutter.dev/get-started/codelab），创建一个Flutter新项目。

此外，后续步骤涉及客户端项目和代码操作。为了方便体验，我们使用简化的集成项目源代码（此源代码仓库仅用于展示集成步骤）。如果您对拥有广泛功能范围、高级功能和定制选项的全面应用程序感兴趣，可以前往GitHub查看完整的项目代码（https://github.com/TencentCloud/chat-demo-flutter/tree/v2）。

步骤1：导入软件包

首先，请导入基本软件包，tencent_cloud_chat（https://pub.dev/packages/tencent_cloud_chat）。

flutter pub add tencent_cloud_chat

接下来，导入适合您需求的UI组件包：

flutter pub add tencent_cloud_chat_message
flutter pub add tencent_cloud_chat_conversation
flutter pub add tencent_cloud_chat_contact
flutter pub add tencent_cloud_chat_user_profile
flutter pub add tencent_cloud_chat_group_profile

在本次体验中，我们建议您导入所有的组件。但在实际项目中，您可以根据具体需求，选择需要导入的组件。

步骤2：UIKit的初始设置

在使用每个模块化包UI组件之前，请按照以下初始设置步骤操作。

全局配置：将项目中的MaterialApp替换为TencentCloudChatMaterialApp。这将自动管理和配置语言、主题（基于material3）、主题模式和其他设置。如果您更喜欢进行手动配置，请参阅文档进行配置。

初始化和登录：调用TencentCloudChat.controller.initUIKit进行初始化和登录。传入您之前记录的应用程序的SDKAppID、UserID和UserSig。同时，在usedComponentsRegister列表中声明每个子模块化UI包的注册。

TencentCloudChat.controller.initUIKit(
  options: const TencentCloudChatInitOptions(
    sdkAppID: , /// [Required]: The SDKAppID of your Tencent Cloud Chat application
    userID: , /// [Required]: The userID of the logged-in user
    userSig: , /// [Required]: The userSig of the logged-in user
  ),
  components: const TencentCloudChatInitComponentsRelated( /// [Required]: The modular UI components related settings, taking effects on a global scale.
    usedComponentsRegister: [
      /// [Required]: List of registration functions for the components used in the Chat UIKit.
          TencentCloudChatConversationManager.register,
          TencentCloudChatMessageManager.register,
          TencentCloudChatUserProfileManager.register,
          TencentCloudChatGroupProfileManager.register,
          TencentCloudChatContactManager.register,
      ],
  ),
);

完成全局配置后，我们现在可以深入了解如何使用模块化UI组件。

步骤3：集成模块化UI组件

在大多数用例中，您将需要手动实例化并将TencentCloudChatConversation和TencentCloudChatContact组件添加到Widget中（如果需要）。其他组件会根据用户操作自动导航。在本教程中，我们将使用bottomNavigationBar来管理页面并在TencentCloudChatConversation和TencentCloudChatContact组件之间切换。

首先，声明一个currentIndex变量和一个List<Widget> pages数组，以表示当前选定的组件和存储组件实例。

List<Widget> pages = [];
int currentIndex = 0;

将实例存储在 pages 数组中：

pages = [
      const TencentCloudChatConversation(),
      const TencentCloudChatContact(),
    ];

最后，按照以下方式修改 build 方法：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (index) async {
          if (index != currentIndex) {
            setState(
                  () {
                currentIndex = index;
              },
            );
          }
        },
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.chat_bubble_outline), label: "Chats"),
          BottomNavigationBarItem(
              icon: Icon(Icons.contacts), label: "Contacts"),
        ],
      ),
      body: pages[currentIndex],
    );
  }

至此，您已成功完成了Flutter IM UIKit的集成。现在，让我们运行项目并体验 Flutter Chat UIKit。

体验Flutter IM UIKit的实际效果

1. 使用在 initUIKit 方法中创建的第一个测试帐户登录，并启动应用程序。

2. 运行 flutter run。

注意：如果您在运行 iOS 时遇到问题，或者 Android SDK 版本不匹配，请参考我们的文档（https://github.com/TencentCloud/chat-uikit-flutter/tree/v2/tencent_cloud_chat/example）并选择适当的版本配置。

成功进入应用后，您将看到会话和联系人页面，并可以在底部进行切换。但是，目前还没有会话可供测试。切换到联系人页面，点击右上角的“添加联系人”，将另一个测试帐户添加为联系人。