update flutter uikit to 2.0.0
anonymous
22
CHANGELOG.md
|
|
@ -1,8 +1,22 @@
|
|||
## 1.0.0
|
||||
|
||||
* Add: Support adding Flutter module to Native APP, for details, please refer to [this documentation](https://www.tencentcloud.com/document/product/1047/51456) to implement.
|
||||
* Add: Customize sticker and Emoji for text messages. For details, please refer to [this documentation](https://cloud.tencent.com/document/product/269/80882) to modify.
|
||||
* Optimize: The loading duration for history message list, especially with lots of media and file messages.
|
||||
* Optimize: More panel area supports scroll.
|
||||
* Optimize: Load latest messages when scrolling back to bottom with more fluency.
|
||||
* Modify: It is required to provide the call record widget to `messageItemBuilder` => `customMessageItemBuilder` of `TIMUIKitChat`. You can choose to use the default widget, `CallMessageItem`, from our call plugin `tim_ui_kit_calling_plugin` directly. Refer to the [Demo](https://github.com/TencentCloud/chat-demo-flutter/tree/main/lib/utils/custom_message/custom_message_element.dart).
|
||||
* Fix: The amount of photos from the album on Android.
|
||||
* Fix: The out of bounds for long text in the group profile info card.
|
||||
* Fix: Some bugs.
|
||||
|
||||
> **Please pay more attention to the second line and sixth line**, that some modifications are required, otherwise the module of sticker / emoji / call records will not work.
|
||||
|
||||
## 0.1.8
|
||||
|
||||
* Optimize: File batch downloading queue, allow click multiple file messages once.
|
||||
* Optimize: Group list widgets can be updated automatically.
|
||||
* Optimize: Camera capture supports relatively lower performance devices, adjust resolution automatically.
|
||||
* Optimize: Camera capture supports relatively lower performance devices, adjusting resolution automatically.
|
||||
* Optimize: Supports customize the color and text style of the app bar, especially on TIMUIKitChat widget.
|
||||
* Fix: Friend remark or nickname can not show on group tips.
|
||||
* Fix: Crash on video playing.
|
||||
|
|
@ -10,7 +24,7 @@
|
|||
|
||||
## 0.1.7
|
||||
|
||||
* Add: Big and RAW images supports, especially for those captured from latest version of iOS and iPhone 14 Pro series, compress and format before sending automatically.
|
||||
* Add: Big and RAW images supported, especially for those captured from the latest version of iOS and iPhone 14 Pro series, compress and format before sending automatically.
|
||||
* Optimize: Performance and stability, especially for history message list and launching.
|
||||
* Optimize: Makes initializing the `TIMUIKitChat` an idempotent operation.
|
||||
* Optimize: Load latest messages when scrolling back to bottom.
|
||||
|
|
@ -23,12 +37,12 @@
|
|||
* Add: Web supports. Now, you could implement TUIKit on iOS/Android/Web platforms.
|
||||
* Add: Disk storage checking after log in, and controls in `config` of `init`.
|
||||
* Add: `timeDividerConfig`, `notificationAndroidSound`, `isSupportMarkdownForTextMessage` and `onTapLink` to `TIMUIKitChatConfig`.
|
||||
* Remove: The default Emoji list, due to the copyright issues. You can provided your own sticker list to panel by [tim_ui_kit_sticker_plugin](https://pub.dev/packages/tim_ui_kit_sticker_plugin).
|
||||
* Remove: The default Emoji list, due to the copyright issues. You can provide your own sticker list to the panel by [tim_ui_kit_sticker_plugin](https://pub.dev/packages/tim_ui_kit_sticker_plugin).
|
||||
* Optimize: You could now choose to disable Markdown parsing for text messages.
|
||||
* Optimize: You could now choose to disable the shows for @ message in conversation list.
|
||||
* Optimize: You could now return `null` for `notificationExt`/`notificationBody` in `TIMUIKitChatConfig` and `messageRowBuilder` in `MessageItemBuilder`, to use default value up to your needs in the specific case, means you can control whether or not using customized setting based on the provided situation, without the necessary to re-define the same logic as the TUIKit in your code.
|
||||
* Optimize: Supports multiple lines for text messages.
|
||||
* Optimize: Rebuild and improve the experience of `TIMUIKitChat`. While, `TIMUIKitChatController` needs to be specified to `controller` here, like how we shows in [Demo](https://github.com/TencentCloud/TIMSDK/blob/master/Flutter/Demo/im-flutter-uikit/lib/src/chat.dart).
|
||||
* Optimize: Rebuild and improve the experience of `TIMUIKitChat`. While, `TIMUIKitChatController` needs to be specified to `controller` here, like how we shows in [Demo](https://github.com/TencentCloud/tc-chat-demo-flutter/lib/src/chat.dart).
|
||||
* Fix: Several bugs.
|
||||
|
||||
## 0.1.3
|
||||
|
|
|
|||
215
README.md
|
|
@ -1,57 +1,122 @@
|
|||
<style>
|
||||
.button-9 {
|
||||
appearance: button;
|
||||
backface-visibility: hidden;
|
||||
background-color: #1d52d9;
|
||||
border-radius: 6px;
|
||||
border-width: 0;
|
||||
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
|
||||
font-size: 100%;
|
||||
height: 44px;
|
||||
line-height: 1.15;
|
||||
margin: 12px 0 0;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
transform: translateZ(0);
|
||||
transition: all .2s,box-shadow .08s ease-in;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.button-9:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button-9:focus {
|
||||
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<br>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.tencentcloud.com/products/im">
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/raw/fd589e1dc7dc3752f320a3b0251189f0.png" width="288px" alt="Tencent Chat Logo" />
|
||||
<a href="https://www.tencentcloud.com/products/im?from=pub">
|
||||
<img src="https://qcloudimg.tencent-cloud.cn/raw/429a2f58678a1f5b150c6ae04aa0b569.png" width="320px" alt="Tencent Chat Logo" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h1 align="center"> Tencent Cloud IM Chat UIKIt</h1>
|
||||
<h1 align="center">Tencent Cloud Chat UIKIt</h1>
|
||||
|
||||
<br>
|
||||
|
||||
<p align="center">
|
||||
Globally interconnected In-App Chat, user profile and relationship chains and offline push.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<p align="center">
|
||||
More languages:
|
||||
<a href="https://cloud.tencent.com/document/product/269/70746">简体中文-快速入门</a>
|
||||
<a href="https://github.com/TencentCloud/TIMSDK/blob/master/Flutter/IMSDK/tim_ui_kit/README_ZH.md">简体中文-README</a>
|
||||
<a href="https://tencentcloud.com/document/product/269/70746?from=pub">简体中文-快速入门</a>
|
||||
<a href="https://github.com/TencentCloud/tc-chat-uikit-flutter/README_ZH.md?from=pub">简体中文-README</a>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
<p align="center">
|
||||
TUIKit has Chat SDK, UI components and basic business logic inside. You can choose our pure Chat SDK <a href="https://pub.dev/packages/tencent_im_sdk_plugin">tencent_im_sdk_plugin</a> if you tend to build the UI yourself.
|
||||
TUIKit has Chat SDK, UI components and basic business logic inside. You can choose our pure Chat SDK <a href="https://pub.dev/packages/tencent-cloud-chat-sdk">tencent-cloud-chat-sdk</a> if you tend to build the UI yourself.
|
||||
</p>
|
||||
|
||||
<a target="_blank" href="https://comm.qq.com/im/doc/flutter/en/TUIKit/readme.html"><button type="button" class="button-9" role="button">Official Documentation</button></a>
|
||||
|
||||
<br>
|
||||
|
||||
## Experience DEMO
|
||||
|
||||
You can experience our Chat and Voice/Video Call modules via the following demos.
|
||||
|
||||
**Those following versions of demo has been build by the same Flutter project with our SDKs and extensions.**
|
||||
|
||||
<table style="text-align:center; vertical-align:middle; max-width: 800px">
|
||||
<tr>
|
||||
<th style="text-align:center;">Mobile APP</th>
|
||||
<th style="text-align:center;">WEB - H5</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: 10px">[Recommend] iOS/Android APP<img style="max-width:200px; margin: 20px 0 20px 0" src="https://qcloudimg.tencent-cloud.cn/raw/ca2aaff551410c74fce48008c771b9f6.png"/></div></td>
|
||||
<td><div style="display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: 10px">Scan for the Web DEMO<img style="max-width:200px; margin: 20px 0 20px 0" src="https://qcloudimg.tencent-cloud.cn/raw/3c79e8bb16dd0eeab35e894a690e0444.png"/></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
**Also, taking a look of the screenshots of TUIKit from [here](https://www.tencentcloud.com/document/product/1047/50059?from=pub) are suggested.**
|
||||
|
||||
## Introduction to TUIKit
|
||||
|
||||
TUIKit is a set of official UI components for Tencent Cloud IM Chat SDK, with chat business logic around it. It provides components such as the conversation, chat, relationship chain, and group.
|
||||
[TUIKit](https://www.tencentcloud.com/document/product/1047/50059?from=pub) is a set of official UI components for Tencent Cloud Chat SDK, with chat business logic around it. It provides components such as the conversation, chat, relationship chain, and group.
|
||||
|
||||
You can use these UI components to build your APP with the In-APP chat module quickly and easily.
|
||||
|
||||
|
||||
|
||||
Currently, Flutter TUIKit contains the following main components:
|
||||
Currently, Flutter [TUIKit](https://www.tencentcloud.com/document/product/1047/50059?from=pub) contains the following main components:
|
||||
|
||||
- [TIMUIKitCore](https://www.tencentcloud.com/document/product/1047/46297#timuikitcore): Core entry
|
||||
- [TIMUIKitConversation](https://www.tencentcloud.com/document/product/1047/46297#timuikitconversation): Conversation list
|
||||
- [TIMUIKitChat](https://www.tencentcloud.com/document/product/1047/46297#timuikitchat): Chat module, includes historical message list and message sending area, with some other features like message reaction and URL preview, etc.
|
||||
- [TIMUIKitContact](https://www.tencentcloud.com/document/product/1047/46297#timuikitcontact): Contacts list
|
||||
- [TIMUIKitProfile](https://www.tencentcloud.com/document/product/1047/46297#timuikitprofile): User profile and relationship management
|
||||
- [TIMUIKitGroupProfile](https://www.tencentcloud.com/document/product/1047/46297#timuikitgroupprofile): Group profile and management
|
||||
- [TIMUIKitGroup](https://www.tencentcloud.com/document/product/1047/46297#timuikitgroup): The list of group self joined
|
||||
- [TIMUIKitBlackList](https://www.tencentcloud.com/document/product/1047/46297#timuikitblacklist): The list of user been blocked
|
||||
- [TIMUIKitNewContact](https://www.tencentcloud.com/document/product/1047/46297#timuikitnewcontact): New contacts application list
|
||||
- [TIMUIKitSearch](https://pub.dev/documentation/tim_ui_kit/latest/ui_views_TIMUIKitSearch_tim_uikit_search/TIMUIKitSearch-class.html): Search globally
|
||||
- [TIMUIKitSearchMsgDetail](https://pub.dev/documentation/tim_ui_kit/latest/ui_views_TIMUIKitSearch_tim_uikit_search_msg_detail/TIMUIKitSearchMsgDetail-class.html): Search in specific conversation
|
||||
- [TIMUIKitCore](https://comm.qq.com/im/doc/flutter/en/TUIKit/TIMUIKitCore/readme.html): Core entry
|
||||
- [TIMUIKitConversation](https://www.tencentcloud.com/document/product/1047/50059?from=pub#timuikitconversation): Conversation list
|
||||
- [TIMUIKitChat](https://www.tencentcloud.com/document/product/1047/50059?from=pub#timuikitchat): Chat module, includes historical message list and message sending area, with some other features like message reaction and URL preview, etc.
|
||||
- [TIMUIKitContact](https://www.tencentcloud.com/document/product/1047/50059?from=pub#relationship-chain-components): Contacts list
|
||||
- [TIMUIKitProfile](https://www.tencentcloud.com/document/product/1047/50059?from=pub#timuikitprofile): User profile and relationship management
|
||||
- [TIMUIKitGroupProfile](https://www.tencentcloud.com/document/product/1047/50059?from=pub#timuikitgroupprofile): Group profile and management
|
||||
- [TIMUIKitGroup](https://www.tencentcloud.com/document/product/1047/50059?from=pub#relationship-chain-components): The list of group self joined
|
||||
- [TIMUIKitBlackList](https://www.tencentcloud.com/document/product/1047/50059?from=pub#relationship-chain-components): The list of user been blocked
|
||||
- [TIMUIKitNewContact](https://www.tencentcloud.com/document/product/1047/50059?from=pub#relationship-chain-components): New contacts application list
|
||||
- [TIMUIKitSearch](https://www.tencentcloud.com/document/product/1047/50036?from=pub): Search globally
|
||||
- [TIMUIKitSearchMsgDetail](https://www.tencentcloud.com/document/product/1047/50036?from=pub): Search in specific conversation
|
||||
|
||||
Also, there are some other useful components and widgets, that can help to build your APP, and meet your business needs, including group entry application list and group member list, etc.
|
||||
|
||||
For the source code of the project in the figure above, see [im-flutter-uikit](https://github.com/tencentyun/TIMSDK/tree/master/Flutter/Demo/im-flutter-uikit). The project is open source and can be used directly.
|
||||
For the source code of the project in the figure above, see [im-flutter-uikit](https://github.com/TencentCloud/tc-chat-demo-flutter). The project is open source and can be used directly.
|
||||
|
||||
## Supported Platforms
|
||||
|
||||
|
|
@ -61,33 +126,35 @@ For the source code of the project in the figure above, see [im-flutter-uikit](h
|
|||
|
||||
## Get Started
|
||||
|
||||
**[Please refer this documents](https://www.tencentcloud.com/document/product/1047/45907), for a completed and detailed get started guide.**
|
||||
**[Please refer this documents](https://www.tencentcloud.com/document/product/1047/45907?from=pub), for a completed and detailed get started guide.**
|
||||
|
||||
## Directions
|
||||
|
||||
The following guide describes how to use Flutter TUIKit to build a simple IM APP quickly.
|
||||
The following guide describes how to use Flutter TUIKit to build a simple Chat APP quickly.
|
||||
|
||||
**You may refer to the appendix, if willing to know about the detail and parameter for each widgets.**
|
||||
|
||||
> If you tend to add this Flutter [TUIKit](https://www.tencentcloud.com/document/product/1047/50059?from=pub) to your existing application directly, you may refer to [this documentation](https://www.tencentcloud.com/document/product/1047/51456). Add the Flutter module to your existing app, coding once and deploying to all platforms. It could reduce your workload, to adding chat and call modules to your existing, to a large extent.
|
||||
|
||||
### Step 0. Create two accounts for testing
|
||||
|
||||
[Signed up](https://www.tencentcloud.com/document/product/378/17985) and [log in](https://www.tencentcloud.com/document/product/378/36004) to the [Tencent IM console](https://console.tencentcloud.com/im).
|
||||
[Signed up](https://www.tencentcloud.com/document/product/378/17985?from=pub) and [log in](https://www.tencentcloud.com/document/product/378/36004?from=pub) to the [Tencent IM console](https://console.tencentcloud.com/im?from=pub).
|
||||
|
||||
[Create an application](https://www.tencentcloud.com/document/product/1047/34577) and enter in.
|
||||
[Create an application](https://www.tencentcloud.com/document/product/1047/34577?from=pub) and enter in.
|
||||
|
||||
Select [Auxiliary Tools](https://console.cloud.tencent.com/im-detail/tool-usersig) > UserSig Generation and Verification on the left sidebar. Generate two pairs of "UserID" and the corresponding "UserSig", and copy the "key" information. [Refer to here.](https://www.tencentcloud.com/document/product/1047/34580#usersig-generation-and-verification)
|
||||
Select [Auxiliary Tools](https://console.tencentcloud.com/im-detail/tool-usersig?from=pub) > UserSig Generation and Verification on the left sidebar. Generate two pairs of "UserID" and the corresponding "UserSig", and copy the "key" information. [Refer to here.](https://www.tencentcloud.com/document/product/1047/34580?from=pub#usersig-generation-and-verification)
|
||||
|
||||
Tips: You may create "user1" and "user2" here.
|
||||
|
||||
> Note：
|
||||
>
|
||||
> The correct `UserSig` distribution method is to integrate the calculation code of `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://www.tencentcloud.com/document/product/1047/34385).
|
||||
> The correct `UserSig` distribution method is to integrate the calculation code of `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://www.tencentcloud.com/document/product/1047/34385?from=pub).
|
||||
|
||||
### Step 1. Create a Flutter app and add permission configuration
|
||||
|
||||
Quickly create a Flutter APP by referring to [Flutter documentation](https://docs.flutter.dev/get-started/install).
|
||||
|
||||
TUIKit needs the permissions of shooting/album/recording/network for basic messaging function. You need ti declare in the Native file manually to use the relevant capabilities normally.
|
||||
TUIKit needs the permissions of shooting/album/recording/network for basic messaging function. You need to declare in the permission manually to use the relevant capabilities normally.
|
||||
|
||||
#### Android
|
||||
|
||||
|
|
@ -136,10 +203,10 @@ end
|
|||
|
||||
### Step 2. Install dependencies
|
||||
|
||||
Add `tim_ui_kit` under `dependencies` in the `pubspec.yaml` file, or run the following command:
|
||||
Add `tencent_cloud_chat_uikit` under `dependencies` in the `pubspec.yaml` file, or run the following command:
|
||||
|
||||
```shell
|
||||
flutter pub add tim_ui_kit
|
||||
flutter pub add tencent_cloud_chat_uikit
|
||||
```
|
||||
|
||||
It supports Android and iOS as default, if you are also willing to use it on the Web, please refer to the following guide.
|
||||
|
|
@ -150,19 +217,26 @@ Version of 0.1.4 or later are required for web supports.
|
|||
|
||||
> If your existing Flutter project does not support Web, run `flutter create .` in the project root directory to add web support.
|
||||
|
||||
Download the following two JS files from GitHub, placed in the `web` directory of the project.
|
||||
Install JS dependencies to `web/` by `npm` or `yarn`.
|
||||
|
||||
- [tim-js-friendship.js](https://github.com/TencentCloud/TIMSDK/blob/master/Web/IMSDK/tim-js-friendship.js)
|
||||
- [Rename this file to `tim-upload-plugin.js`](https://github.com/TencentCloud/TIMSDK/blob/master/Web/IMSDK/tim-upload-plugin/index.js)
|
||||
```shell
|
||||
cd web
|
||||
|
||||
npm init
|
||||
|
||||
npm i tim-js-sdk
|
||||
|
||||
npm i tim-upload-plugin
|
||||
```
|
||||
|
||||
Open `web/index.html` , add the following two lines between `<head>` and `</head>` to import them.
|
||||
|
||||
```html
|
||||
<script src='./tim-upload-plugin.js'></script>
|
||||
<script src="./tim-js-friendship.js"></script>
|
||||
<script src="./node_modules/tim-upload-plugin/index.js"></script>
|
||||
<script src="./node_modules/tim-js-sdk/tim-js-friendship.js"></script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### Step 3. Initialize TUIKit
|
||||
|
||||
|
|
@ -172,7 +246,7 @@ Get the instance of TUIKit first by `TIMUIKitCore.getInstance()`, followed by in
|
|||
|
||||
```dart
|
||||
/// main.dart
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
|
||||
@override
|
||||
|
|
@ -180,7 +254,7 @@ final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
|
|||
_coreInstance.init(
|
||||
sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application
|
||||
loglevel: LogLevelEnum.V2TIM_LOG_DEBUG,
|
||||
listener: V2TimSDKListener());
|
||||
listener: V2TimSDKListener());
|
||||
super.initState();
|
||||
}
|
||||
}
|
||||
|
|
@ -196,13 +270,13 @@ Log in by `_coreInstance.login` .
|
|||
|
||||
```dart
|
||||
/// main.dart
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
|
||||
_coreInstance.login(userID: userID, userSig: userSig);
|
||||
```
|
||||
|
||||
Caveat: Importing UserSig to your application is ONLY for Debugging purposes and cannot be applied for the Release version. Before publishing your app, you should generate your UserSig from your server. Refers to: <https://www.tencentcloud.com/document/product/1047/34385>
|
||||
Caveat: Importing UserSig to your application is ONLY for Debugging purposes and cannot be applied for the Release version. Before publishing your app, you should generate your UserSig from your server. Refers to: <https://www.tencentcloud.com/document/product/1047/34385?from=pub>
|
||||
|
||||
### Step 5. Implementing the conversation list page
|
||||
|
||||
|
|
@ -215,7 +289,7 @@ The only parameter you need to provide at least is `onTapItem` callback, aimed a
|
|||
|
||||
```dart
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
class Conversation extends StatelessWidget {
|
||||
const Conversation({Key? key}) : super(key: key);
|
||||
|
|
@ -255,7 +329,7 @@ It is recommended to provide a `onTapAvatar` callback function, for navigating t
|
|||
|
||||
```dart
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
class Chat extends StatelessWidget {
|
||||
final V2TimConversation selectedConversation;
|
||||
|
|
@ -298,7 +372,7 @@ The only parameter you have to provide at least is 'userID', while this componen
|
|||
|
||||
```dart
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
class UserProfile extends StatelessWidget {
|
||||
final String userID;
|
||||
|
|
@ -323,13 +397,13 @@ class UserProfile extends StatelessWidget {
|
|||
|
||||
Now, your app can send/receive messages, show the conversation list, and deal with the contact friendship.
|
||||
|
||||
You can use others components from TUIKit continually to implement the complete IM function quickly and easily.
|
||||
You can use others components from TUIKit continually to implement the complete Chat module quickly and easily.
|
||||
|
||||
## FAQs
|
||||
|
||||
### Do I need to integrate IM SDK after integrating TUIKit?
|
||||
### Do I need to integrate Chat SDK after integrating TUIKit?
|
||||
|
||||
No. You don't need to integrate IM SDK again. If you want to use IM SDK related APIs, you can get them via `TIMUIKitCore.getSDKInstance()`. This method is recommended to ensure IM SDK version consistency.
|
||||
No. You don't need to integrate Chat SDK again. If you want to use Chat SDK related APIs, you can get them via `TIMUIKitCore.getSDKInstance()`. This method is recommended to ensure Chat SDK version consistency.
|
||||
|
||||
### Why did force quit occur when I sent voice, image, file or other messages?
|
||||
|
||||
|
|
@ -397,7 +471,7 @@ Please do not hesitate to contact us in the following place, if you have any fur
|
|||
- WhatsApp Group: <https://chat.whatsapp.com/Gfbxk7rQBqc8Rz4pzzP27A>
|
||||
- QQ Group: 788910197, chat in Chinese
|
||||
|
||||
Our Website: <https://www.tencentcloud.com/products/im>
|
||||
Our Website: <https://www.tencentcloud.com/products/im?from=pub>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -408,12 +482,12 @@ Our Website: <https://www.tencentcloud.com/products/im>
|
|||
`TIMUIKitCore` provides two static methods, including `getInstance` and `getSDKInstance`。
|
||||
|
||||
- `getInstance`: Used for get the instance of `CoreServicesImpl`.
|
||||
- `getSDKInstance`: Used for get the instance of IM SDK.
|
||||
- `getSDKInstance`: Used for get the instance of Chat SDK.
|
||||
|
||||
`CoreServicesImpl` is the main class of `TUIKit` , providing the methods includes initialization, logging in and out, getting user information, etc.
|
||||
|
||||
```dart
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
|
||||
final V2TIMManager _sdkInstance = TIMUIKitCore.getSDKInstance();
|
||||
|
|
@ -431,7 +505,7 @@ _coreInstance.unInit();
|
|||
// login
|
||||
_coreInstance.login(
|
||||
userID: 0, // user ID
|
||||
userSig: "" // [How do I calculate UserSig on the server?](https://www.tencentcloud.com/document/product/1047/34385)
|
||||
userSig: "" // [How do I calculate UserSig on the server?](https://www.tencentcloud.com/document/product/1047/34385?from=pub)
|
||||
)
|
||||
|
||||
// logout
|
||||
|
|
@ -497,13 +571,13 @@ This listener is used to get information including: errors form SDK API / errors
|
|||
|
||||
Determine the type by `TIMCallbackType`.
|
||||
|
||||
> You may refer to our [DEMO](https://github.com/TencentCloud/TIMSDK/blob/master/Flutter/Demo/im-flutter-uikit/lib/src/pages/app.dart) for the codes in this part, and modifying up to your business needs.
|
||||
> You may refer to our [DEMO](https://github.com/TencentCloud/tc-chat-demo-flutter/lib/src/pages/app.dart) for the codes in this part, and modifying up to your business needs.
|
||||
|
||||
##### Errors form SDK API(`TIMCallbackType.API_ERROR`)
|
||||
|
||||
In this scenario, SDK API original `errorMsg` and `errorCode` are provided.
|
||||
|
||||
[Error codes listed here](https://www.tencentcloud.com/document/product/1047/34348)
|
||||
[Error codes listed here](https://www.tencentcloud.com/document/product/1047/34348?from=pub)
|
||||
|
||||
#### Errors form Flutter(`TIMCallbackType.FLUTTER_ERROR`)
|
||||
|
||||
|
|
@ -580,7 +654,7 @@ All info codes are listed below:
|
|||
The corresponding controller: `TIMUIKitConversationController` is also provided.
|
||||
|
||||
```dart
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
final TIMUIKitConversationController _controller =
|
||||
TIMUIKitConversationController();
|
||||
|
|
@ -644,17 +718,17 @@ Currently supported message parsing:
|
|||
- File message.
|
||||
|
||||
```dart
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
TIMUIKitChat(
|
||||
lifeCycle: ChatLifeCycle(), // Lifecycle hook for TIMUIKitChat
|
||||
conversationID: "", // User ID or Group ID
|
||||
conversationType: ConversationType, // 1 is c2c chat, 2 is group chat
|
||||
conversationShowName: "",
|
||||
conversationShowName: "",
|
||||
appBarActions: [], // appBar operation item, which can be used to jump to the page of group details and personal details, etc.
|
||||
onTapAvatar: _onTapAvatar, // callback function for clicking the avatar, which can be used to jump to the user profile.
|
||||
messageItemBuilder: (MessageItemBuilder) {
|
||||
// Message item layout constructor, you can choose to customize part of the message type or message row layout.
|
||||
// Message item layout constructor, you can choose to customize part of the message type or message row layout.
|
||||
},
|
||||
extraTipsActionItemBuilder: (message) {
|
||||
// The configuration for the menu, opend by long pressed messages
|
||||
|
|
@ -685,10 +759,10 @@ TIMUIKitProfile(
|
|||
profileWidgetBuilder: ProfileWidgetBuilder(), // Customized some kinds of item.
|
||||
profileWidgetsOrder: List<ProfileWidgetEnum>, // Determine the vertical sequence for those profile widgets.
|
||||
builder: (
|
||||
BuildContext context,
|
||||
V2TimFriendInfo friendInfo,
|
||||
V2TimConversation conversation,
|
||||
int friendType,
|
||||
BuildContext context,
|
||||
V2TimFriendInfo friendInfo,
|
||||
V2TimConversation conversation,
|
||||
int friendType,
|
||||
bool isMute) {
|
||||
// Customized the whole page. `profileWidgetBuilder` and `profileWidgetsOrder` will no longer works if you define this.
|
||||
},
|
||||
|
|
@ -704,7 +778,7 @@ TIMUIKitProfile(
|
|||
|
||||
```dart
|
||||
TIMUIKitGroupProfile(
|
||||
groupID: "",
|
||||
groupID: "",
|
||||
profileWidgetBuilder: GroupProfileWidgetBuilder(), // Customized some kinds of item.
|
||||
profileWidgetsOrder: List<GroupProfileWidgetEnum>, // Determine the vertical sequence for those profile widgets.
|
||||
builder: (BuildContext context, V2TimGroupInfo groupInfo, List<V2TimGroupMemberFullInfo?> groupMemberList){
|
||||
|
|
@ -750,7 +824,7 @@ TIMUIKitGroup(
|
|||
`TIMUIKitContact` shows the list of contacts.
|
||||
|
||||
```dart
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
TIMUIKitContact(
|
||||
lifeCycle: FriendListLifeCycle(), // Lifecycle hook for TIMUIKitContact
|
||||
|
|
@ -773,7 +847,7 @@ TIMUIKitContact(
|
|||
`TIMUIKitSearchMsgDetail` is an intra-conversation search component that can search for chat records for a specific conversation.
|
||||
|
||||
```dart
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
// Search globally
|
||||
TIMUIKitSearch(
|
||||
|
|
@ -789,6 +863,21 @@ TIMUIKitSearchMsgDetail(
|
|||
);
|
||||
```
|
||||
|
||||
## What's more
|
||||
|
||||
In addition to Flutter SDK, we have numerous SDKs that covering all platforms. The following platforms can communicate with each other and provide services across devices and platforms.
|
||||
|
||||
| Platform | Introduction | Demo | Download | UI Components library |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Android | Compatible with JDK 1.6 and Android SDK version 14 and later | [Get](https://www.tencentcloud.com/document/product/1047/34279) | [Get](https://github.com/TencentCloud/TIMSDK/tree/master/Android/IMSDK) | [Get](https://www.tencentcloud.com/document/product/1047/50062) |
|
||||
| iOS | Compatible with iOS 8.0 and later | [Get](https://www.tencentcloud.com/document/product/1047/34279) | [Get](https://github.com/TencentCloud/TIMSDK/tree/master/iOS/IMSDK) | [Get](https://www.tencentcloud.com/document/product/1047/50062) |
|
||||
| Mac | Compatible with OS X 10.10 and later | - | [Get](https://github.com/TencentCloud/TIMSDK/tree/master/Mac/IMSDK) | - |
|
||||
| Windows | C and C++ are included. Compatible with Windows 7, Windows 8 and 8.1, and Windows 10. Both 32-bit and 64-bit programs can be connected | - | [Get](https://github.com/TencentCloud/TIMSDK/tree/master/Windows/IMSDK) | - |
|
||||
| Web | Supports Internet Explorer 11+, Chrome 7+, Firefox 3.6+, Opera 12+ and Safari 6+ | [Get](https://www.tencentcloud.com/document/product/1047/34279) | [Get](https://www.npmjs.com/package/tim-js-sdk) | [Get](https://www.tencentcloud.com/document/product/1047/50061) |
|
||||
| Unity | Supports 2020.2.7f1c1 or later | - | [Get](https://www.tencentcloud.com/document/product/1047/46263) | - |
|
||||
| Flutter | Supports Flutter 2 & dart 2.12 and later, deploying to Android, iOS, Web, macOS and Windows. | [Get](https://www.tencentcloud.com/document/product/1047/34279) | Here | [Get](https://pub.dev/packages/tencent_cloud_chat_uikit) |
|
||||
| Electron | Electron SDK | - | [Get](https://github.com/tencentyun/im_electron_demo) | - |
|
||||
|
||||
## Contact Us
|
||||
|
||||
Please do not hesitate to contact us in the following place, if you have any further questions or tend to learn more about the use cases.
|
||||
|
|
@ -797,4 +886,4 @@ Please do not hesitate to contact us in the following place, if you have any fur
|
|||
- WhatsApp Group: <https://chat.whatsapp.com/Gfbxk7rQBqc8Rz4pzzP27A>
|
||||
- QQ Group: 788910197, chat in Chinese
|
||||
|
||||
Our Website: <https://www.tencentcloud.com/products/im>
|
||||
Our Website: <https://www.tencentcloud.com/products/im?from=pub>
|
||||
42
README_ZH.md
|
|
@ -1,4 +1,4 @@
|
|||
[English](https://github.com/TencentCloud/TIMSDK/blob/master/Flutter/IMSDK/tim_ui_kit/README.md) | 简体中文
|
||||
[English](https://github.com/TencentCloud/tc-chat-uikit-flutter) | 简体中文
|
||||
|
||||
# Flutter TUIKit
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ TUIKit 是基于 IM SDK 实现的一套 UI 组件，其包含会话、聊天、
|
|||
基础用法如下，先初始化IM，再登录用户：
|
||||
|
||||
```dart
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
|
||||
final V2TIMManager _sdkInstance = TIMUIKitCore.getSDKInstance();
|
||||
|
|
@ -82,7 +82,7 @@ _coreInstance.login(
|
|||
|
||||
通过`TIMCallbackType`确定类型。
|
||||
|
||||
> 这部分的处理逻辑[可参考我们的 DEMO](https://github.com/TencentCloud/TIMSDK/blob/master/Flutter/Demo/im-flutter-uikit/lib/src/pages/app.dart)，并根据您的需要，自行修改。
|
||||
> 这部分的处理逻辑[可参考我们的 DEMO](https://github.com/TencentCloud/tc-chat-demo-flutter/lib/src/pages/app.dart)，并根据您的需要，自行修改。
|
||||
|
||||
#### SDK API 错误（`TIMCallbackType.API_ERROR`）
|
||||
|
||||
|
|
@ -170,19 +170,19 @@ _coreInstance.login(
|
|||
|
||||
#### 方法
|
||||
|
||||
- **loadData(int count)**:
|
||||
- **loadData(int count)**:
|
||||
加载会话列表, count 为单次加载数量
|
||||
- **reloadData(int count)**:
|
||||
- **reloadData(int count)**:
|
||||
重新加载会话列表, count 为单次加载数量
|
||||
- **pinConversation({required String conversationID, required bool isPinned})**:
|
||||
会话置顶
|
||||
- **clearHistoryMessage({required V2TimConversation conversation})**:
|
||||
- **clearHistoryMessage({required V2TimConversation conversation})**:
|
||||
清除指定会话消息
|
||||
- **deleteConversation({required String conversationID})**:
|
||||
- **deleteConversation({required String conversationID})**:
|
||||
删除指定会话
|
||||
- **setConversationListener({V2TimConversationListener? listener})**:
|
||||
- **setConversationListener({V2TimConversationListener? listener})**:
|
||||
添加会话监听器
|
||||
- **dipose()**:
|
||||
- **dipose()**:
|
||||
销毁
|
||||
|
||||
---
|
||||
|
|
@ -226,19 +226,19 @@ _coreInstance.login(
|
|||
|
||||
### TIMUIKitProfileController
|
||||
|
||||
- **pinedConversation(bool isPined, String convID)**:
|
||||
- **pinedConversation(bool isPined, String convID)**:
|
||||
会话置顶, `isPined` 为是否置顶，`convID` 为需要置顶的会话 ID.
|
||||
- **addUserToBlackList(bool shouldAdd, String userID)**:
|
||||
- **addUserToBlackList(bool shouldAdd, String userID)**:
|
||||
添加用户至黑名单, `shouldAdd`为是否需要添加至黑名单, `userID`为需要被添加到黑名单的用户.
|
||||
- **changeFriendVerificationMethod(int allowType)**:
|
||||
- **changeFriendVerificationMethod(int allowType)**:
|
||||
更改好友验证方式, `0`为"同意任何用户添加好友"、`1`为"需要验证"、`2`为"拒绝任何人加好友".
|
||||
- **updateRemarks(String userID, String remark)**:
|
||||
- **updateRemarks(String userID, String remark)**:
|
||||
更新好友备注, `userID`为被更新的用户 ID, `remark`为备注.
|
||||
- **loadData**:
|
||||
- **loadData**:
|
||||
加载数据
|
||||
- **dispose()**:
|
||||
- **dispose()**:
|
||||
销毁
|
||||
- **addFriend(String userID)**:
|
||||
- **addFriend(String userID)**:
|
||||
添加好友，`userID`为被添加好友的用户 ID.
|
||||
|
||||
---
|
||||
|
|
@ -285,7 +285,7 @@ _coreInstance.login(
|
|||
[详细用法可参考此文档](https://cloud.tencent.com/document/product/269/79121)
|
||||
|
||||
```dart
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
|
||||
// 全局搜索
|
||||
TIMUIKitSearch(
|
||||
|
|
@ -394,10 +394,10 @@ TIMUIKitSearchMsgDetail(
|
|||
|
||||
```dart
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tim_ui_kit/tim_ui_kit.dart';
|
||||
import 'package:tim_ui_kit/ui/controller/tim_uikit_chat_controller.dart';
|
||||
import 'package:tim_ui_kit/ui/views/TIMUIKitChat/TIMUIKItMessageList/tim_uikit_history_message_list.dart';
|
||||
import 'package:tim_ui_kit/ui/views/TIMUIKitChat/TIMUIKitTextField/tim_uikit_text_field.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/ui/controller/tim_uikit_chat_controller.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKItMessageList/tim_uikit_history_message_list.dart';
|
||||
import 'package:tencent_cloud_chat_uikit/ui/views/TIMUIKitChat/TIMUIKitTextField/tim_uikit_text_field.dart';
|
||||
|
||||
class Chat extends StatefulWidget {
|
||||
final V2TimConversation selectedConversation;
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 581 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 947 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 301 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 975 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 508 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |