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

随着智能设备的高速迭代,开发者在开发时不得不花费大量精力适配众多设备和平台,同时还要面对低延迟、高可用和跨平台兼容等各种挑战。对于强调随时随地交流的聊天应用等实时通信工具,尤其如此。面对智能手机、平板电脑、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_messageflutter pub add tencent_cloud_chat_conversationflutter pub add tencent_cloud_chat_contactflutter pub add tencent_cloud_chat_user_profileflutter 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)并选择适当的版本配置。

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

图片

现在,您将在联系人列表中看到另一个帐户。点击联系人开始聊天。您还可以重新运行应用程序,使用另一个用户的 UserID 登录,并体验相互发送消息。

有关详细集成、配置和高级用法的更多信息,请参阅文档:https://www.tencentcloud.com/zh/document/product/1047/58585

  • 28
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值