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