{"id":21873136,"url":"https://github.com/tencentcloud/chat-uikit-flutter","last_synced_at":"2025-10-07T01:25:02.012Z","repository":{"id":63697279,"uuid":"567101993","full_name":"TencentCloud/chat-uikit-flutter","owner":"TencentCloud","description":"A powerful Flutter chat UI component library and business logic for Tencent Cloud Chat, creating seamless in-app chat modules for delightful user experiences.","archived":false,"fork":false,"pushed_at":"2025-06-17T09:35:42.000Z","size":8331,"stargazers_count":186,"open_issues_count":22,"forks_count":144,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-09-20T13:44:09.333Z","etag":null,"topics":["chat","flutter"],"latest_commit_sha":null,"homepage":"https://trtc.io/products/chat?utm_source=gfs\u0026utm_medium=link\u0026utm_campaign=%E6%B8%A0%E9%81%93\u0026_channel_track_key=k6WgfCKn","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TencentCloud.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-17T04:15:44.000Z","updated_at":"2025-09-19T07:25:16.000Z","dependencies_parsed_at":"2023-02-17T16:01:17.692Z","dependency_job_id":"60180c5a-3eec-44fc-9add-4144e1098f5b","html_url":"https://github.com/TencentCloud/chat-uikit-flutter","commit_stats":{"total_commits":21,"total_committers":3,"mean_commits":7.0,"dds":"0.23809523809523814","last_synced_commit":"57d836fcb625b493928825172196799cb389702c"},"previous_names":["tencentcloud/tc-chat-uikit-flutter"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/TencentCloud/chat-uikit-flutter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-uikit-flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-uikit-flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-uikit-flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-uikit-flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TencentCloud","download_url":"https://codeload.github.com/TencentCloud/chat-uikit-flutter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-uikit-flutter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278707917,"owners_count":26031932,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","flutter"],"created_at":"2024-11-28T07:06:37.354Z","updated_at":"2025-10-07T01:25:01.973Z","avatar_url":"https://github.com/TencentCloud.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# It is recommended to download the source code from [pub.dev](https://pub.dev/packages/tencent_cloud_chat_uikit/versions)\n\n## Product Introduction\nYou only need to integrate Chat SDK to easily gain chat, conversation, group capabilities, and you can also communicate with other products such as whiteboards through signaling messages. Chat can cover various business scenarios, support the access and use of various platforms, and fully meet the communication needs.\n\n## Check Out Our Sample Apps\nThis document introduces how to quickly run the Chat demo on the iOS platform.\n[\u003cimg src=\"https://im.sdk.qcloud.com/tools/resource/GitHubResource/build_flutter_chat_app.png\" width=\"800\"/\u003e](https://www.youtube.com/watch?v=lawzmfW9vls)\n\nFor the other platforms, please refer to document：\n- [**chat-uikit-android**](https://github.com/TencentCloud/chat-uikit-android)\n- [**chat-uikit-ios**](https://github.com/TencentCloud/chat-uikit-ios)\n- [**chat-uikit-vue**](https://github.com/TencentCloud/chat-uikit-vue)\n- [**chat-uikit-react**](https://github.com/TencentCloud/chat-uikit-react)\n- [**chat-uikit-uniapp**](https://github.com/TencentCloud/chat-uikit-uniapp)\n- [**chat-uikit-wechat**](https://github.com/TencentCloud/chat-uikit-wechat)\n  \n## Introduction to TUIKit\nChat SDK comes with TUIKit, which is an official set of UI components that have chat business logic built-in. TUIKit includes components like conversation, chat, relationship chain, and group.\nSee [TUIKit Library Overview](https://trtc.io/document/50059?platform=flutter\u0026product=chat\u0026menulabel=uikit) for more details.\n\nDevelopers can use these UI components to quickly and easily add In-APP chat modules to their mobile applications.\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/f140dd76be01a65abfb7e6ba2bf50ed5.png\" width=\"1000\"/\u003e\n\nCurrently, Flutter TUIKit\ncontains the following main components:\n\n- TIMUIKitCore: Core entry\n- TIMUIKitConversation: Conversation list\n- TIMUIKitChat: Chat module, includes historical message list and message sending area, with some other features\n  like message reaction and URL preview, etc.\n- TIMUIKitContact: Contacts list\n- TIMUIKitProfile: User profile and relationship management\n- TIMUIKitGroupProfile: Group profile and management\n- TIMUIKitGroup: The list of group self joined\n- TIMUIKitBlackList: The list of user been blocked\n- TIMUIKitNewContact: New contacts application list\n- TIMUIKitSearch: Search globally\n- TIMUIKitSearchMsgDetail: Search in specific conversation\n\nIn addition to these components, there are other useful components and widgets available to help\ndevelopers meet their business needs, such as group entry application list and group member list.\n\n## Compatible Platforms\n\nThe platforms are compatible with the deployment of our Chat UIKit.\n\n- Android\n- iOS\n- Web (version 0.1.4 and later)\n- Windows (version 2.0.0 and later)\n- macOS (version 2.0.0 and later)\n\n## Get Started\n\nPlease refer to [Run Demo](https://trtc.io/document/45907?platform=flutter\u0026product=chat\u0026menulabel=uikit) for a complete and detailed guide on getting started.\n\n## Directions\n\nThe following guide describes how to quickly build a simple chat application using Flutter TUIKit.\nRefer to the appendix if you want to learn about the details and parameters of each widget.\n\n### Step 0: Create two accounts for testing\n\nSign up and log in to the [Chat console](https://console.trtc.io/).\n\nCreate an application and enter it. Click Users and create two accounts.\n\n\u003e The correct way to distribute `UserSig` is to integrate the calculation code for `UserSig` into your server and provide an application-oriented API. When `UserSig` is needed, your application can send a request to the business server for a dynamic `UserSig.` For more information, see [How do I calculate UserSig on the server?](https://trtc.io/document/34385?product=chat\u0026menulabel=serverapis).\n\n### Step 1: Create a Flutter app and add permission configuration\n\nCreate a Flutter app quickly by following the [Flutter documentation](https://docs.flutter.dev/get-started/install).\n\nTUIKit needs the permissions of shooting/album/recording/network for basic messaging functions. You need to declare these permissions manually to use the relevant capabilities normally.\n\n#### Android\n\nOpen `android/app/src/main/AndroidManifest.xml` and add the following lines between `\u003cmanifest\u003e` and `\u003c/manifest\u003e`.\n\n```xml\n\u003cuses-permission android:name=\"android.permission.INTERNET\" /\u003e\n\u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\" /\u003e\n\u003cuses-permission android:name=\"android.permission.FOREGROUND_SERVICE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.VIBRATE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.ACCESS_BACKGROUND_LOCATION\" /\u003e\n\u003cuses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" /\u003e\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n\u003cuses-permission android:name=\"android.permission.READ_MEDIA_IMAGES\"/\u003e\n\u003cuses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\"/\u003e\n```\n\n#### iOS\n\nOpen `ios/Podfile` and add the following lines to the end of the file.\n\n```pod\npost_install do |installer|\n  installer.pods_project.targets.each do |target|\n    flutter_additional_ios_build_settings(target)\n    target.build_configurations.each do |config|\n            config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'\n            config.build_settings['ENABLE_BITCODE'] = 'NO'\n            config.build_settings[\"ONLY_ACTIVE_ARCH\"] = \"NO\"\n        end\n    target.build_configurations.each do |config|\n          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [\n            '$(inherited)',\n            'PERMISSION_MICROPHONE=1',\n            'PERMISSION_CAMERA=1',\n            'PERMISSION_PHOTOS=1',\n          ]\n        end\n  end\nend\n```\n\n### Step 2: Install dependencies\n\nAdd `tencent_cloud_chat_uikit` under `dependencies` in the `pubspec.yaml` file, or run the following command:\n\n```shell\nflutter pub add tencent_cloud_chat_uikit\n```\n\nIt supports Android and iOS by default. If you also want to use it on the web, refer to the following guide.\n\n#### Web Support\n\nVersion 0.1.4 or later is required to support web.\n\nIf your existing Flutter project does not support web, run `flutter create .` in the project root directory to add web support.\n\nInstall JavaScript dependencies to `web/` using `npm` or `yarn`.\n\n```shell\ncd web\n\nnpm init\n\nnpm i tim-js-sdk\n\nnpm i tim-upload-plugin\n```\n\nOpen `web/index.html` and add the following two lines between `\u003chead\u003e` and `\u003c/head\u003e` to import them.\n\n```html\n\u003cscript src=\"./node_modules/tim-upload-plugin/index.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./node_modules/tim-js-sdk/tim-js-friendship.js\"\u003e\u003c/script\u003e\n```\n\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/a4d25e02c546e0878ba59fcda87f9c76.png\" width=\"800\"/\u003e\n\n\n### Step 3: Initialize TUIKit\n\nInitialize TUIKit when your app starts. You only need to perform the initialization once for the project to start.\n\nGet the instance of TUIKit first using `TIMUIKitCore.getInstance()`, followed by initializing it with your `sdkAppID`.\n\n```dart\n/// main.dart\nimport 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';\n\nfinal CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();\n\n@override\nvoid initState() {\n  _coreInstance.init(\n      sdkAppID: 0, // Replace 0 with the SDKAppID of your Tencent Cloud Chat application\n      loglevel: LogLevelEnum.V2TIM_LOG_DEBUG,\n      listener: V2TimSDKListener());\n  super.initState();\n}}\n```\n\n\u003e **You may also want to register a callback function for `onTUIKitCallbackListener` here. Refer to the appendix.**\n\n### Step 4: Get the signature and log in\n\nYou can now log in one of the testing accounts generated in Step 0 to start the Tencent Cloud Chat module.\n\nLog in using `_coreInstance.login`.\n\n```dart\n/// main.dart\nimport 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';\n\nfinal CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();\n_coreInstance.login(userID: userID, userSig: userSig);\n```\n\nNote: Importing UserSig to your application is only for debugging purposes and cannot be used for the release version. Before publishing your app, you should generate your UserSig from your server. Refer to: [Generate Signature](https://trtc.io/document/34385?product=chat\u0026menulabel=serverapis).\n\n## Step 5. Implementing the conversation list page\n\nYou can use the conversation (channel) list page as the homepage of your Chat module, which includes all conversations with users and groups that have chat records.\n\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/a27b131d555b1158d150bd9b337c1d9d.png\" width=\"300\"/\u003e\n\nYou can create a `Conversation` class, with `TIMUIKitConversation` as its body, to render the conversation list. You only need to provide the `onTapItem` callback, which allows users to navigate to the Chat page for each conversation. In the next step, we'll introduce the `Chat` class.\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';\n\nclass Conversation extends StatelessWidget {\n  const Conversation({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: const Text(\n          \"Message\",\n          style: TextStyle(color: Colors.black),\n        ),\n      ),\n      body: TIMUIKitConversation(\n        onTapItem: (selectedConv) {\n          Navigator.push(\n              context,\n              MaterialPageRoute(\n                builder: (context) =\u003e\n                    Chat(\n                      selectedConversation: selectedConv,\n                    ),\n              ));\n        },\n      ),\n    );\n  }\n}\n```\n## Step 6. Implementing the chat page\n\nThe chat page consists of the main message list and a message sending bar at the bottom.\n\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/09b8b9b54fd0caa47069544343eba461.jpg\" width=\"600\"/\u003e\n\nYou can create a `Chat` class, with `TIMUIKitChat` as its body, to render the chat page. We recommend providing an `onTapAvatar` callback function to navigate to the profile page for the current contact, which we'll introduce in the next step.\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';\n\nclass Chat extends StatelessWidget {\n  final V2TimConversation selectedConversation;\n\n  const Chat({Key? key, required this.selectedConversation}) : super(key: key);\n\n  String? _getConvID() {\n    return selectedConversation.type == 1\n        ? selectedConversation.userID\n        : selectedConversation.groupID;\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return TIMUIKitChat(\n      conversationID: _getConvID() ?? '', \n      conversationType: selectedConversation.type ?? 1, \n      conversationShowName: selectedConversation.showName ?? \"\", \n      onTapAvatar: (_) {\n        Navigator.push(\n            context,\n            MaterialPageRoute(\n              builder: (context) =\u003e UserProfile(userID: userID),\n            ));\n      }, \n    );\n  }\n```\n## Step 7. Implementing the user profile page\n\nThis page shows the profile of a specific user and maintains the relationship between the current logged-in user and the other user.\n\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/03e88da6f1d63f688d2a8ee446da43ff.png\" width=\"600\"/\u003e\n\nYou can create a `UserProfile` class, with `TIMUIKitProfile` as its body, to render the user profile page.\n\nThe only parameter you have to provide is `userID`, while this component automatically generates the profile and relationship maintenance page based on the existence of friendship.\n\n\u003e **TIP**: Please use `profileWidgetBuilder` first to customize some profile widgets and determine their vertical sequence using `profileWidgetsOrder` if you want to customize this page. If this method cannot meet your business needs, you may consider using `builder` instead.\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';\n\nclass UserProfile extends StatelessWidget {\n  final String userID;\n\n  const UserProfile({required this.userID, Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: const Text(\n          \"Message\",\n          style: TextStyle(color: Colors.black),\n        ),\n      ),\n      body: TIMUIKitProfile(\n        userID: widget.userID,\n      ),\n    );\n  }\n}\n```\n\nNow your app can send and receive messages, display the conversation list, and manage contact friendships. You can use other components from TUIKit to quickly and easily implement the complete Chat module.\n\n## FAQs\n\n#### Do I need to integrate Chat SDK after integrating TUIKit?\n\nNo. You don't need to integrate Chat SDK again. If you want to use Chat SDK related APIs, you can\nget them via `TIMUIKitCore.getSDKInstance()`. This method is recommended to ensure Chat SDK version\nconsistency.\n\n#### Why did force quit occur when I sent voice, image, file or other messages?\n\nCheck whether you have enabled the **camera**, **mic**, **album**, or other related permissions.\n\nRefers to Step 1 above.\n\n#### What should I do if clicking Build And Run for an Android device triggers an error, stating no available device is found?\n\nCheck that the device is not occupied by other resources. Alternatively, click Build to generate an\nAPK package, drag it to the simulator, and run it.\n\n#### What should I do if an error occurs during the first run for an iOS device?\n\nIf an error occurs after the configuration, click **Product \u003e Clean Build Folder** , clean the\nproduct, and run `pod install` or `flutter run` again.\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/d495b2e8be86dac4b430e8f46a15cef4.png\" width=\"800\"/\u003e\n\n#### What should I do if an error occurs during debugging on a real iOS device when I am wearing an Apple Watch?\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/1ffcfe39a18329c86849d7d3b34b9a0e.png\" width=\"800\"/\u003e\n\nTurn on Airplane Mode on your Apple Watch, and go to **Settings \u003e Bluetooth** on your iPhone to turn\noff Bluetooth.\n\nRestart Xcode (if opened) and run `flutter run` again.\n\n#### What should I do when an error occurs on an Android device after TUIKit is imported into the application automatically generated by Flutter?\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/d95efdd4ae50f13f38f4c383ca755ae7.png\" width=\"800\"/\u003e\n\n1. Open `android\\app\\src\\main\\AndroidManifest.xml` and\n   complete `xmlns:tools=\"http://schemas.android.com/tools\" / android:label=\"@string/android_label\" / tools:replace=\"android:label\"`\n   as follows.\n\n```xml\n\n\u003cmanifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    package=\"Replace it with your Android package name\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\u003e\n    \u003capplication android:label=\"@string/android_label\" tools:replace=\"android:label\"\n        android:icon=\"@mipmap/ic_launcher\"\n    // Specify an icon path\n    android:usesCleartextTraffic=\"true\"\n    android:requestLegacyExternalStorage=\"true\"\u003e\n```\n\n2. Open `android\\app\\build.gradle` and complete `minSdkVersion` and `targetSdkVersion`\n   in `defaultConfig`.\n\n```gradle\ndefaultConfig {\n  applicationId \"\" // Replace it with your Android package name\n  minSdkVersion 21\n  targetSdkVersion 30\n}\n```\n\n---\n\n## Recommended Resources\n\nFor those who require real-time voice and video call capabilities alongside our Chat UIKit, \nwe highly recommend our dedicated voice and video call UI component package, [tencent\\_calls\\_uikit](https://pub.dev/packages/tencent_calls_uikit).\nThis robust and feature-rich package is specifically designed to complement our existing solution and seamlessly integrate with it, \nproviding a comprehensive, unified communication experience for your users.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentcloud%2Fchat-uikit-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencentcloud%2Fchat-uikit-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentcloud%2Fchat-uikit-flutter/lists"}