chat uikit flutter下载 - chat uikit flutter源代码下载

建议从pub.dev下载源代码

产品简介

您只需要集成聊天SDK即可轻松获得聊天，对话，小组功能，也可以通过信号消息与其他产品（例如白板）进行通信。聊天可以涵盖各种业务场景，支持各种平台的访问和使用，并完全满足沟通需求。

查看我们的示例应用程序

本文档介绍了如何在iOS平台上快速运行聊天演示。有关其他平台，请参阅文档：

chat-uikit-android
chat-uikit-ios
chat-uikit-vue
Chat-uikit反应
Chat-uikit-uniapp
chat-uikit-wechat

Tuikit简介

CHAT SDK附带Tuikit，这是一组官方的UI组件，具有聊天业务逻辑内置。 Tuikit包括对话，聊天，关系链和小组等组件。有关更多详细信息，请参见Tuikit库概述。

开发人员可以使用这些UI组件快速，轻松地在其移动应用程序中添加应用内聊天模块。

目前，Flutter Tuikit包含以下主要组成部分：

TimuikitCore：核心条目
TimuikitConversation：对话列表
Timuikitchat：聊天模块，包括历史消息列表和消息发送区域，以及其他一些功能，例如消息反应和URL预览，等等。
TimuikitContact：联系人列表
TimuikitProfile：用户资料和关系管理
timuikitgroupofile：小组资料和管理
timuikitGroup：自我加入的群体列表
timuikitblacklist：用户列表被阻止
timuikitnewcontact：新联系人申请列表
Timuikitsearch：全球搜索
timuikitsearchmsgdetail：在特定对话中搜索

除这些组件外，还有其他有用的组件和小部件可帮助开发人员满足其业务需求，例如组入口应用程序列表和组成员列表。

兼容平台

这些平台与我们的聊天Uikit的部署兼容。

安卓
ios
Web（版本0.1.4及以后）
Windows（版本2.0.0及以后）
MacOS（版本2.0.0及以后）

开始

请参阅Run Demo，以获取有关入门的完整详细指南。

方向

以下指南描述了如何使用Flutter Tuikit快速构建简单的聊天应用程序。如果您想了解每个小部件的详细信息和参数，请参阅附录。

步骤0：创建两个用于测试的帐户

注册并登录聊天控制台。

创建一个应用程序并输入。单击用户并创建两个帐户。

分发UserSig正确方法是将UserSig的计算代码集成到服务器中，并提供面向应用程序的API。当需要UserSig时，您的应用程序可以将请求发送到Business Server的动态UserSig.有关更多信息，请参阅如何计算服务器上的用户？

步骤1：创建flutter应用程序并添加权限配置

通过遵循扑动文档来快速创建flutter应用程序。

Tuikit需要用于基本消息传递功能的拍摄/专辑/录音/网络的权限。您需要手动声明这些权限以正常使用相关功能。

安卓

打开android/app/src/main/AndroidManifest.xml ，并在<manifest>和</manifest>之间添加以下几行。

< uses-permission android : name = " android.permission.INTERNET " />
< uses-permission android : name = " android.permission.RECORD_AUDIO " />
< uses-permission android : name = " android.permission.FOREGROUND_SERVICE " />
< uses-permission android : name = " android.permission.ACCESS_NETWORK_STATE " />
< uses-permission android : name = " android.permission.VIBRATE " />
< uses-permission android : name = " android.permission.ACCESS_BACKGROUND_LOCATION " />
< uses-permission android : name = " android.permission.WRITE_EXTERNAL_STORAGE " />
< uses-permission android : name = " android.permission.READ_EXTERNAL_STORAGE " />
< uses-permission android : name = " android.permission.CAMERA " />
< uses-permission android : name = " android.permission.READ_MEDIA_IMAGES " />
< uses-permission android : name = " android.permission.READ_MEDIA_VIDEO " />

ios

打开ios/Podfile ，然后在文件末尾添加以下行。

 post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
            config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
            config.build_settings['ENABLE_BITCODE'] = 'NO'
            config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
        end
    target.build_configurations.each do |config|
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
            '$(inherited)',
            'PERMISSION_MICROPHONE=1',
            'PERMISSION_CAMERA=1',
            'PERMISSION_PHOTOS=1',
          ]
        end
  end
end

步骤2：安装依赖项

在pubspec.yaml dependencies中添加tencent_cloud_chat_uikit ，或运行以下命令：

flutter pub add tencent_cloud_chat_uikit

默认情况下，它支持Android和iOS。如果您还想在网络上使用它，请参阅以下指南。

网络支持

支持Web需要0.1.4版或更高版本。

如果您现有的Flutter项目不支持Web，请运行flutter create .在项目根目录中添加Web支持。

使用npm或yarn安装JavaScript依赖项web/ 。

 cd web

npm init

npm i tim-js-sdk

npm i tim-upload-plugin

打开web/index.html ，并在<head>和</head>之间添加以下两行以导入它们。

 < script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >

步骤3：初始化Tuikit

当您的应用程序启动时，初始化Tuikit。您只需要执行一次初始化即可开始。

首先使用TIMUIKitCore.getInstance()获取Tuikit的实例，然后使用sdkAppID初始化它。

 /// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;

final CoreServicesImpl _coreInstance = TIMUIKitCore . getInstance ();

@override
void initState () {
  _coreInstance. init (
      sdkAppID : 0 , // Replace 0 with the SDKAppID of your Tencent Cloud Chat application
      loglevel : LogLevelEnum . V2TIM_LOG_DEBUG ,
      listener : V2TimSDKListener ());
  super . initState ();
}}

您可能还需要在此处注册onTUIKitCallbackListener的回调函数。请参阅附录。

步骤4：获取签名并登录

现在，您可以登录步骤0中生成的一个测试帐户之一，以启动Tencent Cloud Chat模块。

使用_coreInstance.login登录。

 /// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;

final CoreServicesImpl _coreInstance = TIMUIKitCore . getInstance ();
_coreInstance. login (userID : userID, userSig : userSig);

注意：将用户导入您的应用程序仅用于调试目的，并且不能用于发行版。在发布应用程序之前，您应该从服务器中生成用户。请参阅：生成签名。

步骤5。实施对话列表页面

您可以将对话（频道）列表页面用作聊天模块的主页，其中包括与具有聊天记录的用户和组的所有对话。

您可以以TIMUIKitConversation为主体创建Conversation类，以渲染对话列表。您只需要提供onTapItem回调，该回调允许用户导航到每个对话的聊天页面。在下一步中，我们将介绍Chat课。

 import 'package:flutter/material.dart' ;
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;

class Conversation extends StatelessWidget {
  const Conversation ({ Key ? key}) : super (key : key);

  @override
  Widget build ( BuildContext context) {
    return Scaffold (
      appBar : AppBar (
        title : const Text (
          "Message" ,
          style : TextStyle (color : Colors .black),
        ),
      ),
      body : TIMUIKitConversation (
        onTapItem : (selectedConv) {
          Navigator . push (
              context,
              MaterialPageRoute (
                builder : (context) =>
                    Chat (
                      selectedConversation : selectedConv,
                    ),
              ));
        },
      ),
    );
  }
}

第6步。实施聊天页面

聊天页面由主要消息列表和底部的消息发送栏组成。

您可以将TIMUIKitChat作为其主体创建Chat课，以渲染聊天页面。我们建议提供一个onTapAvatar回调功能，以导航到当前联系人的配置文件页面，我们将在下一步中介绍。

 import 'package:flutter/material.dart' ;
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;

class Chat extends StatelessWidget {
  final V2TimConversation selectedConversation;

  const Chat ({ Key ? key, required this .selectedConversation}) : super (key : key);

  String ? _getConvID () {
    return selectedConversation.type == 1
        ? selectedConversation.userID
        : selectedConversation.groupID;
  }

  @override
  Widget build ( BuildContext context) {
    return TIMUIKitChat (
      conversationID : _getConvID () ?? '' , 
      conversationType : selectedConversation.type ?? 1 , 
      conversationShowName : selectedConversation.showName ?? "" , 
      onTapAvatar : (_) {
        Navigator . push (
            context,
            MaterialPageRoute (
              builder : (context) => UserProfile (userID : userID),
            ));
      }, 
    );
  }

步骤7。实现用户配置文件页面

此页面显示了特定用户的配置文件，并保持当前登录用户与其他用户之间的关系。

您可以以TIMUIKitProfile作为其主体来创建一个UserProfile类，以渲染用户配置文件页面。

您必须提供的唯一参数是userID ，而此组件会根据友谊的存在自动生成配置文件和关系维护页面。

提示：请首先使用profileWidgetBuilder来自定义一些配置文件小部件，并使用profileWidgetsOrder确定其垂直序列，如果您想自定义此页面。如果此方法无法满足您的业务需求，则可以考虑使用builder 。

 import 'package:flutter/material.dart' ;
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;

class UserProfile extends StatelessWidget {
  final String userID;

  const UserProfile ({ required this .userID, Key ? key}) : super (key : key);

  @override
  Widget build ( BuildContext context) {
    return Scaffold (
      appBar : AppBar (
        title : const Text (
          "Message" ,
          style : TextStyle (color : Colors .black),
        ),
      ),
      body : TIMUIKitProfile (
        userID : widget.userID,
      ),
    );
  }
}

现在，您的应用程序可以发送和接收消息，显示对话列表并管理联系人友谊。您可以使用Tuikit中的其他组件快速，轻松地实现完整的聊天模块。

常见问题解答

集成Tuikit后，我需要集成聊天SDK吗？

否。您无需再次集成聊天SDK。如果要使用CHAT SDK相关的API，则可以通过TIMUIKitCore.getSDKInstance()获得它们。建议使用此方法来确保聊天SDK版本一致性。

当我发送语音，图像，文件或其他消息时，为什么强制退出？

检查您是否已启用了相机，麦克风，专辑或其他相关权限。

指上面的步骤1。

如果单击构建并运行Android设备，该怎么办？

检查设备是否没有其他资源占用。另外，单击“构建”以生成APK软件包，将其拖动到模拟器并运行。

如果在iOS设备的第一次运行期间发生错误，该怎么办？

如果在配置后发生错误，请单击“产品”>清洁构建文件夹，清洁产品，然后运行pod install或再次flutter run 。

当我穿着Apple Watch时在真实的iOS设备上调试期间发生错误时，该怎么办？

打开Apple Watch上的飞机模式，然后转到“设置”>“ iPhone上的蓝牙”以关闭蓝牙。

重新启动Xcode（如果打开），然后再次flutter run 。

在将Tuikit导入到由Flutter自动生成的应用程序后，在Android设备上发生错误时该怎么办？

打开androidappsrcmainAndroidManifest.xml和完整xmlns:tools="http://schemas.android.com/tools" / android:label="@string/android_label" / tools:replace="android:label"

< manifest xmlns : android = " http://schemas.android.com/apk/res/android "
    package = " Replace it with your Android package name "
    xmlns : tools = " http://schemas.android.com/tools " >
    < application android : label = " @string/android_label " tools : replace = " android:label "
        android : icon = " @mipmap/ic_launcher "
    // Specify an icon path
    android : usesCleartextTraffic = " true "
    android : requestLegacyExternalStorage = " true " >

打开androidappbuild.gradle ，并在defaultConfig中完成minSdkVersion和targetSdkVersion 。

 defaultConfig {
  applicationId " " // Replace it with your Android package name
  minSdkVersion 21
  targetSdkVersion 30
}

chat uikit flutter