Getting Started

Flutter Chat UIKit is designed to provide developers with a comprehensive set of tools to create feature-rich chat applications with ease.
It is built with a modular approach, allowing you to pick and choose the components you need while keeping your application lightweight and efficient.
The UIKit includes a wide range of capabilities, such as Conversation list, Message handling, 
Contact lists, Message Translation, Speech-to-Text, and more.
﻿
Features
1.  Personalized Appearance : With built-in  Dark and Light  modes, the UIKit offers a variety of  theme and appearance customization  options to meet your business needs.
2.  Multi-Platform Compatibility : The adaptable single codebase ensures compatibility across various platforms, including  Mobile devices (iOS/Android),  Tablet (iPad and Android tablets),  Web browsers, and  Desktop environments (Windows/macOS).
3.  Localization Support : Developed with native English and additional language options, including Arabic, Japanese, Korean, Simplified Chinese, and Traditional Chinese. The internationalization features ensure a localized interface language and support custom and  supplementary language , with Arabic support for  RTL  UI.
4.  Enhanced Performance : The UIKit delivers improved message list  performance ,  memory usage , and precise message positioning capabilities, catering to scenarios with large message volumes and navigation to older messages.
5.  Advanced Features : Boasting numerous advanced capabilities, the UIKit includes continuous voice message playback, enhanced multimedia and file message experiences, and intuitive left-right swiping for multimedia message previews.
6.  Refined User Experience : Detail optimizations such as rich  animations ,  haptic feedback , and  a polished interface  contribute to an improved user experience. New features like grid-style avatars, redesigned forwarding panels, group member selectors, and revamped long-press message menus further enrich the experience.
7.  Modular Design : Components are organized into modular packages, allowing for selective importing and reducing unnecessary bloat. Each package supports  built-in navigation transitions , streamlining development and integration by automatically handling transitions, such as between Conversation and Message.
8.  Developer-Friendly Approach : A more unified, standardized component parameter design, clearer code naming conventions, and detailed comments, combined with the flexibility to choose  global or instance-level configuration  management, make development easier and more efficient.
Getting Started
Requirements
Flutter version: 3.19 or above
Dart version: 3.0 or above
Setting Up Application in the Console
Step1：Create an Account
You have signed up for a Tencent Cloud account and set a payment method.
Step2：Start a Free Trial
1. Log in to the Chat console. Click Create Application.
﻿
﻿
﻿
2. Enter the application name in the create pop-up window and choose Chat, select the appropriate Deployment Region, then click Create.
﻿
﻿
﻿
3. Upon creation, you can view the status, business version, SDKAppID, SDKSecretKey, creation time, and expiration time of the newly created application on the current Chat Product Details Page or My Applications.
Note:
By default, a new app is of Free Trial and enabled.
A Tencent Cloud account can create a maximum of 300 Chat apps. If you want to create a new app, disable and delete an unwanted app first. Once an app (along with its SDKAppID) is deleted, the service it provides and all its data are lost. Proceed with caution.
﻿
﻿
﻿
Step3：Generate Account
Note:
For more account-related operations, please refer to account management.
1. Log in to the Chat console, select Chat > Users in the left sidebar, and select the target application at the top. You can manage accounts based on actual business needs.
2. On the Account Management page, click Create account.
3. Configure the following parameters in the pop-up dialog box:
﻿
﻿
﻿
Account Type: Select General or Admin. The role of app admin has the highest level of management permissions. It can call RESTful APIs to perform operations such as creating or disbanding a group, and sending messages to all members. Each app supports up to 10 admins.
Username: Enter the user ID. This field is required.
Nickname: Enter the nickname. This field is optional.
Profile Photo: Enter the URL to the user's profile photo. This field is optional.
4. Click Confirm.
5. After the account is created, you can see the account's username, nickname, type, profile photo, and creation time in the account list.
Step 4: Generate UserSig
Note:
Note: For more UserSig related operations, please refer to UserSig generation & validation.
1. Log in to the Chat console > Development Tools > UserSig Tools.
2. In the UserSig generation tool section, select an application and enter UserID.
3. Click Generate UserSig to generate a signature. The signature validity period defaults to 180 days.
4. Click Copy UserSig to paste and save the signature.
﻿
﻿
﻿
Coding
Note：
The guide provide a Simplified Overview of integrating with Flutter Chat UIKit only.
For a detailed integration process, please refer to this guide: Detailed Integration Guide.
To begin, it's best to have a Flutter project ready or create a new one to fully experience this tutorial. We recommend following the steps to create a new Flutter project.
If you're interested in exploring a fully-fledged app with an extensive range of features, advanced capabilities, and customization options, please check out This Repo.
Step 1. Import the Packages
To get started, import the base package, tencent_cloud_chat_common.
flutter pub add tencent_cloud_chat_common
Next, import the UI component packages that suit your needs:
flutter pub add tencent_cloud_chat_message
flutter pub add tencent_cloud_chat_conversation
flutter pub add tencent_cloud_chat_contact
flutter pub add tencent_cloud_chat_sticker
flutter pub add tencent_cloud_chat_message_reaction
flutter pub add tencent_cloud_chat_text_translate
For demonstration purposes, we suggest importing all of them. However, in real-world projects, you can import packages based on your specific requirements.
The architecture of Flutter Chat UIKit is shown below:
﻿
Step 2. Initial Setup for UIKit
Before you start using each Modular Package UI component, follow these initial setup steps:
Global Configuration
Replace your project's MaterialApp by TencentCloudChatMaterialApp.
This enables automatic management and configuration of language, theme (with material3), theme mode, and other settings. If you prefer manual configuration, refer to Implement the global configuration for UIKit manually.
Initialization and Login
Call TencentCloudChat.controller.initUIKit to initialize and log in.
Pass in the SDKAppID, userID, and userSig of your Tencent Cloud Chat application created in the previous step. Also, declare the register of each sub Modular UI Package in the usedComponentsRegister list.
TencentCloudChat.controller.initUIKit(
  options: const TencentCloudChatInitOptions(
    sdkAppID: , /// [Required]: The SDKAppID of your Tencent Cloud Chat application
    userID: , /// [Required]: The userID of the logged-in user
    userSig: , /// [Required]: The userSig of the logged-in user
  ),
  components: const TencentCloudChatInitComponentsRelated( /// [Required]: The modular UI components related settings, taking effects on a global scale.
    usedComponentsRegister: [
      /// [Required]: List of registration functions for the components used in the Chat UIKit.
          TencentCloudChatConversationManager.register,
          TencentCloudChatMessageManager.register,
          TencentCloudChatContactManager.register,
      ],
  ),
);
Perfect! With the global configuration complete, we're now ready to dive into the usage of our Modular UI Components. Let's explore how they can enhance your chat application experience.
Step3. Integrating Modular UI Components
In most use cases, you'll need to manually instantiate and add the TencentCloudChatConversation and TencentCloudChatContact components to a widget, if necessary.
Other components are automatically navigated based on user actions.
In this tutorial, we'll use the bottomNavigationBar to manage the pages and switch between the TencentCloudChatConversation and TencentCloudChatContact components.
First, declare a currentIndex variable and a List<Widget> pages array to indicate the currently selected component and store the component instances.
List<Widget> pages = [];
int currentIndex = 0;
Store the instances in the pages array.
pages = [
      const TencentCloudChatConversation(),
      const TencentCloudChatContact(),
    ];
Finally, modify the build method as follows:
@override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (index) async {
          if (index != currentIndex) {
            setState(
                  () {
                currentIndex = index;
              },
            );
          }
        },
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.chat_bubble_outline), label: "Chats"),
          BottomNavigationBarItem(
              icon: Icon(Icons.contacts), label: "Contacts"),
        ],
      ),
      body: pages[currentIndex],
    );
  }
And that's it! You've successfully integrated the components.
Step 4. Experience the Flutter Chat UIKit in Action
Now, let's run the project and experience the Flutter Chat UIKit.
Log in with the first test account created in the initUIKit method and launch the app.
Start by running flutter run.
Once you've successfully entered the app, you'll see the Conversation and Contact pages, with the ability to switch between them at the bottom.
However, there are no conversations to test yet.
Don't worry! Switch to the Contacts page, click 'Add Contact' in the top-right corner, and add the other test account as a contact. You'll now see the other account in the Contacts list.
﻿
Click on the contact to start chatting. You can also rerun the app, log in with the other user's UserID, and experience sending messages to each other.
In conclusion, we've now completed the entire simplified integration process. Thank you for experiencing the power of Tencent Cloud Flutter Chat UIKit.
For more information on detailed integration, configuration, and advanced usage, please refer to this guide: Detailed Integration Guide.
﻿