環境 | バージョン |
Flutter | Chat SDKの最小要件はFlutterバージョン 3.0.0 が必要。TUIKit コンポーネントライブラリの最小要件はFlutterバージョン3.19.0が必要。 |
Android | Android Studio Dolphin | 2021.3.1以降のバージョン。AppにはAndroid 7.0以降を搭載したデバイスが必要です。 |
iOS | Xcode 12.0以降のバージョン。プロジェクトに有効な開発者署名があることを確認してください。 |
プラットフォーム | ||
iOS | 対応可 | 対応可 |
Android | 対応可 | 対応可 |
対応可、4.1.1+2以降のバージョンは対応可 | 対応可、0.1.5とそれ以降のバージョンは対応可 | |
対応可、4.1.9以降のバージョンは対応可 | 近日リリース | |
対応可、4.1.9以降のバージョンは対応可 | 近日リリース | |
混合開発 (Flutter SDKを既存のネイティブアプリケーションに追加します) | 5.0.0以降のバージョンは対応可 | 1.0.0とそれ以降のバージョンは対応可 |
モバイルAPP | WEB - H5 |
iOS/Android APP、プラットフォームのダウンロードを自動的に判断します ![]() | 携帯電話でコードをスキャンしてオンラインWeb版DEMOを体験します ![]() |
SDKAppIDを記録していること。UserID、署名(Key)、UserSigの3つをコピーし、その後のログインで使用します。

UserSigの正しい発行方法は、サーバーで生成し、Appのインターフェース向けに提供する方法となります。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。統合方法 | 適用シナリオ |
IM Demoは完全なチャットAppであり、コードはオープンソース化されています。チャットライクなユースケースを実装したい場合は、Demoを使用して二次開発を行うことができます。今すぐDemo体験が可能です。 | |
IMのUIコンポーネントリポジトリ TUIKitは、セッションリスト、チャットインターフェース、連絡先リストなどの共通のUIコンポーネントを提供しています。開発者は実際の業務ニーズに応じて、このコンポーネントリポジトリによってカスタムIMアプリケーションをスピーディーにビルドすることができます。この方法を優先して用いることを推奨します。 | |
アプリケーションインターフェースのニーズがTUIKitでは満たせない場合、または多くのカスタマイズが必要な場合は、この方法を用いることができます。 |
# Clone the codegit clone https://github.com/TencentCloud/tc-chat-demo-flutter.git# Install dependenciesflutter pub get
#demoプロジェクトを起動します。SDK_APPID、KEYの2つのパラメータを置き換えてくださいflutter run --dart-define=SDK_APPID={YOUR_SDKAPPID} --dart-define=ISPRODUCT_ENV=false --dart-define=KEY={YOUR_KEY}
--dart-define=SDK_APPID={YOUR_SDKAPPID}の中の{YOUR_SDKAPPID}をご自分のアプリケーションのSDKAppIDに置き換える必要があります。--dart-define=ISPRODUCT_ENV=falseは開発環境か本番環境かを判断します。開発環境の場合、falseとしてください。--dart-define=KEY={YOUR_KEY}の中の{YOUR_KEY}を、その1:テストユーザーの作成のキー(Key)情報に置き換える必要があります。
im-flutter-uikitディレクトリを開きます。
このパスでコマンドを実行して、依存関係を実行します。flutter pub get
main.dartにマウスをhoverし、Edit Configurationsを設定します。

Additional run argsを設定し、環境変数(SDKAPPIDなどの情報)を入力します。例:# SDK_APPID、KEYの2つのパラメータを置き換えてください--dart-define=SDK_APPID={YOUR_SDKAPPID} --dart-define=ISPRODUCT_ENV=false --dart-define=KEY={YOUR_KEY}




im-flutter-uikit/iosディレクトリを開きます。
フォルダ | 説明 |
lib | プログラムのコアディレクトリ |
lib/i18n | 国際化関連コードです。ここでの国際化には、TUIKit自体の機能の国際化や多言語対応は含まれません。必要に応じてインポートできます |
lib/src | プロジェクトのメインディレクトリ |
lib/src/pages | このDemoのいくつかの重点ナビゲーションページです。プロジェクトの初期化完了後、 app.dartはアニメーションをロードして表示し、ログインセッションを判断して、ユーザーをlogin.dartまたはhome_page.dartに誘導します。ユーザーのログイン後、ログイン情報はshared_preferenceプラグインを通じてローカルに保存されます。その後、毎回のアプリケーション起動の際、ローカルに保存されたログイン情報を発見すると、自動的にその情報を使用してログインし、情報がない場合やログインに失敗した場合はログインページに誘導します。自動ログイン中、ユーザーはまだapp.dartで、ロードしたアニメーションを見ることができます。home_page.dartにはボトムTabが含まれ、このDemoの4つの主要機能ページの切り替えを担います。 |
lib/utils | いくつかのツール関数クラス |
lib/src内の各dartファイルはTUIKitコンポーネントをインポートしており、ファイル内でコンポーネントをインスタンス化すると、ページレンダリングが可能になります。lib/srcの主要なファイル | ファイルの説明 |
add_friend.dart | フレンド追加申請ページです。 TIMUIKitAddFriendコンポーネントを使用します |
add_group.dart | グループ参加申請ページです。 TIMUIKitAddGroupコンポーネントを使用します |
blacklist.dart | ブラックリスト一覧ページです。 TIMUIKitBlackListコンポーネントを使用します |
chat.dart | メインチャットページです。TUIKitのフルセットのチャット機能、 TIMUIKitChatコンポーネントを使用します |
chatv2.dart | メインチャットページです。アトミック機能、 TIMUIKitChatコンポーネントを使用します |
contact.dart | 連絡先ページです。 TIMUIKitContactコンポーネントを使用します |
conversation.dart | セッションリストインターフェースです。 TIMUIKitConversationコンポーネントを使用します |
create_group.dart | グループチャット開始ページです。Demoのみで実装でき、コンポーネントは使用しません |
group_application_list.dart | グループ参加申請リストページです。 TIMUIKitGroupApplicationListコンポーネントを使用します |
group_list.dart | グループリストページです。 TIMUIKitGroupコンポーネントを使用します |
group_profile.dart | グループプロファイルおよびグループ管理ページです。 TIMUIKitGroupProfileコンポーネントを使用します |
newContact.dart | 連絡先フレンド申請ページです。 TIMUIKitNewContactコンポーネントを使用します |
routes.dart | Demoのルートです。ログインページ login.dartまたはホームページhome_page.dartにナビゲートします。 |
search.dart | グローバル検索およびセッション内検索ページです。 TIMUIKitSearch(グローバル検索)およびTIMUIKitSearchMsgDetail(セッション内検索)コンポーネントを使用します |
user_profile.dart | ユーザー情報およびリレーションシップチェーン保守ページです。 TIMUIKitProfileコンポーネントを使用します |
Navigatorの処理が必要です。
android/app/src/main/AndroidManifest.xmlを開き、<manifest></manifest>に次の権限を追加します。<uses-permissionandroid:name="android.permission.INTERNET"/><uses-permissionandroid:name="android.permission.RECORD_AUDIO"/><uses-permissionandroid:name="android.permission.FOREGROUND_SERVICE"/><uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE"/><uses-permissionandroid:name="android.permission.VIBRATE"/><uses-permissionandroid:name="android.permission.ACCESS_BACKGROUND_LOCATION"/><uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permissionandroid:name="android.permission.READ_EXTERNAL_STORAGE"/><uses-permissionandroid:name="android.permission.CAMERA"/>
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['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)','PERMISSION_MICROPHONE=1','PERMISSION_CAMERA=1','PERMISSION_PHOTOS=1',]endendend
tencent_cloud_chat_uikitをインストールすれば、基本のIM SDKをインストールする必要はありません。#コマンドラインでの実行:flutter pub add tencent_cloud_chat_uikit
TIMUIKitCore.getInstance()を実行してから、初期化関数init()を呼び出し、sdkAppIDを渡すよう、必ず確認してください。/// main.dartimport 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();@overridevoid initState() {_coreInstance.init(sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integrating// language: LanguageEnum.en, // インターフェース言語の設定です。設定されていない場合は、システム言語に従いますloglevel: LogLevelEnum.V2TIM_LOG_DEBUG,onTUIKitCallbackListener: (TIMCallback callbackValue){}, // [設定をお勧めします。詳細については、この部分を参照](https://www.tencentcloud.com/document/product/1047/50054#onTUIKitCallbackListener)してくださいlistener: V2TimSDKListener());super.initState();}}
_coreInstance.loginメソッドを呼び出して、テストアカウントにログインします。import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();_coreInstance.login(userID: userID, userSig: userSig);
UserSigの正しい発行方法は、サーバーで生成し、Appのインターフェース向けに提供する方法となります。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。
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);@overrideWidget 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,),));},),);}}

onTapAvatarイベントの処理関数を渡すとよいでしょう。UserProfileクラスに関しては、次の手順で説明します。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;}@overrideWidget build(BuildContext context) {return TIMUIKitChat(conversationID: _getConvID() ?? '', // groupID or UserIDconversationType: selectedConversation.type ?? 1, // Conversation typeconversationShowName: selectedConversation.showName ?? "", // Conversation display nameonTapAvatar: (_) {Navigator.push(context,MaterialPageRoute(builder: (context) => UserProfile(userID: userID),));}, // Callback for the clicking of the message sender profile photo. This callback can be used with `TIMUIKitProfile`.);}
userIDを渡すだけで、フレンドかどうかに基づいて自動的にユーザー詳細ページを生成できるものです。profileWidgetBuilderでカスタマイズが必要なprofileを渡すことを優先し、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);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Message",style: TextStyle(color: Colors.black),),),body: TIMUIKitProfile(userID: widget.userID,),);}}
TIMUIKitProfileと基本的に同じです。TIMUIKitUnreadCount小さな赤い点コンポーネントを使用できます。TIMUIKitSearchグローバル検索コンポーネントです。連絡先/グループ/チャット記録のグローバル検索をサポートし、TIMUIKitSearchMsgDetailを使用して特定のセッションでチャット記録を検索することもサポートします。2つのモードは、conversationが渡されるかどうかによって異なります。flutter pub add tencent_cloud_chat_sdk
initSDKを呼び出して、SDKの初期化を完了します。sdkAppIDを渡します。import 'package:tencent_cloud_chat_sdk/enum/V2TimSDKListener.dart';import 'package:tencent_cloud_chat_sdk/enum/log_level_enum.dart';import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';TencentImSDKPlugin.v2TIMManager.initSDK(sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integratingloglevel: LogLevelEnum.V2TIM_LOG_DEBUG, // Loglistener: V2TimSDKListener(),);
TencentImSDKPlugin.v2TIMManager.loginメソッドを呼び出し、テストアカウントにログインします。res.codeが0の場合、ログインは成功です。import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimCallback res = await TencentImSDKPlugin.v2TIMManager.login(userID: userID,userSig: userSig,);
UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供する方法となります。UserSigが必要なときは、Appから業務サーバーにリクエストを送信し動的にUserSigを取得します。詳細はサーバーでのUserSig新規作成をご参照ください。createTextMessage(String)を呼び出してテキストメッセージを作成します。sendMessage()を呼び出して、このIDのメッセージを送信します。receiverには、その前に作成した別のテストアカウントIDを入力できます。シングルチャットメッセージを送信する場合はgroupIDの入力は不要です。import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimValueCallback<V2TimMsgCreateInfoResult> createMessage =await TencentImSDKPlugin.v2TIMManager.getMessageManager().createTextMessage(text: "The text to create");String id = createMessage.data!.id!; // The message creation IDV2TimValueCallback<V2TimMessage> res = await TencentImSDKPlugin.v2TIMManager.getMessageManager().sendMessage(id: id, // Pass in the message creation ID toreceiver: "The userID of the destination user",groupID: "The groupID of the destination group",);

nextSeqを保守し、現在の位置を記録する必要があります。import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';String nextSeq = "0";getConversationList() async {V2TimValueCallback<V2TimConversationResult> res = await TencentImSDKPlugin.v2TIMManager.getConversationManager().getConversationList(nextSeq: nextSeq, count: 10);nextSeq = res.data?.nextSeq ?? "0";}
await TencentImSDKPlugin.v2TIMManager.getConversationManager().setConversationListener(listener: new V2TimConversationListener(onConversationChanged: (List<V2TimConversation> list){_onConversationListChanged(list);},onNewConversation:(List<V2TimConversation> list){_onConversationListChanged(list);},
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';List<V2TimConversation> _conversationList = [];_onConversationListChanged(List<V2TimConversation> list) {for (int element = 0; element < list.length; element++) {int index = _conversationList.indexWhere((item) => item!.conversationID == list[element].conversationID);if (index > -1) {_conversationList.setAll(index, [list[element]]);}else{_conversationList.add(list[element]);}}
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimValueCallback<List<V2TimMessage>> res = await TencentImSDKPlugin.v2TIMManager.getMessageManager().getGroupHistoryMessageList(groupID: "groupID",count: 20,lastMsgID: "",);List<V2TimMessage> msgList = res.data ?? [];// here you can use msgList to render your message list}
V2TimAdvancedMsgListener.onRecvNewMessageから受信します。onRecvNewMessageコールバックがトリガーされると、必要に応じて新しいメッセージをメッセージ履歴リストに追加することができます。import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';final adVancesMsgListener = V2TimAdvancedMsgListener(onRecvNewMessage: (V2TimMessage newMsg) {_onReceiveNewMsg(newMsg);},/// ... other listeners related to message);TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(listener: adVancesMsgListener);
flutter pub add tencent_im_sdk_plugin_web
flutter create .を実行してWebサポートを追加してください。web/に進み、npmまたはyarnを使用して関連するJSの依存関係をインストールします。プロジェクトを初期化するときは、画面指示に従って進めてください。cd webnpm initnpm i tim-js-sdknpm i tim-upload-plugin
web/index.htmlを開き、<head> </head>にJSファイルを導入します。次のとおりです。<script src="./node_modules/tim-upload-plugin/index.js"></script><script src="./node_modules/tim-js-sdk/tim-js-friendship.js"></script>

flutter pub add tencent_im_sdk_plugin_desktop
macos/Runner/DebugProfile.entitlementsファイルを開きます。<dict></dict>に次のkey-valueキーと値のペアを追加します。<key>com.apple.security.app-sandbox</key><false/>
pod installまたはflutter runを行うことができます
ios/Podsフォルダおよびios/Podfile.lock ファイルを手動で削除し、次のコマンドを実行して、依存関係を再インストールします
cd iossudo arch -x86_64 gem install ffiarch -x86_64 pod install --repo-update
cd iossudo gem install ffipod install --repo-update

設定 => Bluetoothで完全にオフにしてください。flutter runを実行します。
android\\app\\src\\main\\AndroidManifest.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="Android端末のパッケージ名に置き換える"xmlns:tools="http://schemas.android.com/tools"><applicationandroid:label="@string/android_label"tools:replace="android:label"android:icon="@mipmap/ic_launcher" // iconパスを指定するandroid:usesCleartextTraffic="true"android:requestLegacyExternalStorage="true">
android\\app\\build.gradleを開き、defaultConfigのminSdkVersionおよびtargetSdkVersionへの入力を補完します。defaultConfig {applicationId "" // Android端末のパッケージ名に置き換えるminSdkVersion 21targetSdkVersion 30}
フィードバック