Tried Adding Flutter chat in 2 hours

daisy5144 — Tue, 30 Apr 2024 08:48:59 +0000

I wanted to create a chat app, but when I tried to build it from the beginning, I was at a loss and wondered what to do, then I came across Tencent Cloud Chat from Tencent Cloud. Since the document is mostly in English, I will upload how I created a chat app using Flutter Chat UIKit from scratch. I'm currently writing this guide while I'm making it.
Tencent Cloud Chat
Flutter Chat UIKit
you can follow my steps to create a chat app like mine.

Create Flutter app

If you already have the app, skip this part and go to step 2.
Flutter is a suite of application UI tools from Google that can be used on multiple platforms (iOS, Android, web, PC, etc.) with a single code. I'm also a beginner, so I followed Flutter's beginner's guide.
I ran it on my Mac and followed the Flutter guide until step 4 [Add a button].

Create Account

Go to Console, create an account, enter your personal information, and you're done. I'm going to use the free version, so there's no need to add a payment method. Tip: For personal development purposes, a Google account is faster.
Select Free trial and create an application. Select the function you need among Call, Conference, and RTC Engine, and press [Create] to create a new application. I chose Call and it includes call and chat functions. It is good to remember the application's sdkappid and secretKey as they are important information for initialization and log in.

Create a test user. I'm going to test the chat API, so I'll create two test users in the console in advance. Click the Application created earlier, click Chat, then go to User and create User1 and User2. In the image, you can press the buttons sequentially from left to right.
Package import. Go back to the Flutter app you created earlier and type the following into the terminal. flutter pub add tencent_cloud_chat If a TXIMSDK_Plus_Mac problem occurred at this time and the app could not be run, run pod repo update Then import the necessary modules. I imported the contents below.

// message window
flutter pub add tencent_cloud_chat_message
  // History message list
flutter pub add tencent_cloud_chat_conversation
// friend list
flutter pub add tencent_cloud_chat_contact
// user profile
flutter pub add tencent_cloud_chat_user_profile
// group profile
flutter pub add tencent_cloud_chat_group_profile

Coding

●Change MaterialApp to TencentCloudChatMaterialApp. (It allows you to use UIKit’s language settings, theme settings, etc.)

●Initialization
After changing MyHomePage to StatefulWidget, I initialized UIKit in the initState function.
The userSig of the user trying to log in was obtained from the console.

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,
          TencentCloudChatUserProfileManager.register,
          TencentCloudChatGroupProfileManager.register,
          TencentCloudChatContactManager.register,
      ],
  ),
);

●Chat page
First, I used Conversation (history message list) and Contact (friend list).
I changed the build content in the demo and pressed R (refresh)...

List<Widget> pages = [
    const TencentCloudChatConversation(),
    const TencentCloudChatContact(),
  ];
  int currentIndex = 0;

  @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],
    );
  }

●Add friends
First, user1 cannot send a message because he has no friends, so add user2 as a friend.

After adding, user2 appears in the contact list. If you fail to add friends, check user2's add friend option in the console.

●Send message
Last but not least, send the most important message. If you only use iOS or Android, you can immediately click on the friend list to return to the send message screen. However, since I am developing a PC platform, I had to add the information below to proceed to the send message window.

Since the conversation and message parts of a PC are combined, when you go to the conversation page, the chat screen also appears immediately. At this time, you have to return false; to process other logic besides moving to the conversation page I wrote. The fact is that return true does not process any logic!
Now you can complete a simple chat app!

Likewise, if you log in as user2, you can view messages sent by user1.
To be exact, it took me less than half a day to write this article.
If you want to create a quick, easy, and simple multi-platform chat app, I hope you take a look at this.
addition:
Change language and theme (supports Japanese, English, Arabic, Chinese, etc., supports dark mode)

In addition to this, you can easily use dark mode and detailed customization, so it would be a good idea to refer to this document.
It is said that there is a complete demo that has already been completed, so it might be a good idea to refer to it.
demo link

DEV Community: daisy5144

Tried Adding Flutter chat in 2 hours

Create Flutter app

Create Account

Coding