플랫폼 | 버전 |
Flutter | IM SDK에는 최소 Flutter 2.2.0 버전이 필요하고 TUIKit 통합 컴포넌트 라이브러리에는 최소 Flutter 2.10.0 버전이 필요합니다. |
Android | Android Studio 3.5 및 그 이후 버전. App은 Android 4.1 및 그 이후 버전 디바이스가 필요합니다. |
iOS | Xcode 11.0 및 그 이후 버전. 프로젝트에 유효한 개발자 서명이 설정되어 있는지 확인십시오. |
플랫폼 | ||
iOS | 지원 | 지원 |
Android | 지원 | 지원 |
v4.1.1+2부터 지원 | v0.1.5부터 지원 | |
v4.1.9부터 지원 | 곧 출시 | |
v4.1.9부터 지원 | 곧 출시 | |
하이브리드 개발 (기존 네이티브 애플리케이션에 Flutter SDK 추가) | v5.0.0부터 지원 | v1.0.0부터 지원 |
모바일 APP | WEB - H5 |
iOS/Android APP, 플랫폼에 따라 자동으로 다운로드됨 | 휴대폰으로 QR 코드를 스캔하여 Web DEMO 체험 |
UserID, 서명(Key), UserSig를 복사하여 이후 로그인에 사용합니다.

UserSig 배포 방식은 서버에서 생성하여, App 지향 인터페이스를 제공하는 것입니다. UserSig가 필요할 때, App은 비즈니스 서버에 동적 UserSig 가져오기 요청을 발송합니다. 자세한 내용은 Generating UserSig를 참고하십시오.통합 방법 | 적용 가능한 시나리오 |
IM Demo는 완전한 채팅 App이며, 코드는 오픈 소스로, 채팅과 같은 시나리오를 구현해야 하는 경우 Demo를 사용하여 2차 개발을 할 수 있습니다. 바로 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의 두 매개변수 교체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를 구성합니다. 예시:# SDK_APPID 및 KEY 매개변수 교체--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에는 이 Demo의 네 가지 주요 기능 페이지 전환을 지원하는 하단 Tab이 포함되어 있습니다. |
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 컴포넌트 사용 |

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만 설치하면 됩니다.# 명령 라인에서 실행: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, // UI 언어. 값을 지정하지 않으면 시스템 언어가 사용됩니다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 가져오기 요청을 발송합니다. 자세한 내용은 Generating 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`.);}
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을 사용하여 특정 대화에서 채팅 기록을 검색할 수도 있습니다. 두 가지 검색 모드 중에서 선택하기 위해 conversation을 전달할지 여부를 선택할 수 있습니다.flutter pub add tencent_cloud_chat_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(),);
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를 요청합니다. 자세한 내용은 Generating 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",);

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

설정 => 블루투스로 이동하여 블루투스를 끕니다.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}
피드백