How To Create Basic Chat App in Flutter Using ZEGOCLOUD UIKITS

Flutter is a popular open-source UI toolkit that makes it easy to build high-performance mobile and web applications. With the help of the ZegoCloud, Flutter developers can build chat applications quickly and easily. In this article, we will discuss how to create a chat app in Flutter using the ZegoCloud UIKits package.

Before we get started, you need to have a basic understanding of Flutter and how it works. If you are new to Flutter, we recommend that you take some time to learn the basics before proceeding.

Setting up the environment

To get started, we need to install the Flutter SDK and set up the development environment. Once the Flutter SDK is installed, you can create a new Flutter project by running the following command in your terminal:

flutter create my_chat_app

Next, open the project in your preferred IDE (Integrated Development Environment) and add the following dependency to your pubspec.yaml file:

dependencies:
  zego_zimkit: ^2.0.0

This will allow us to use the ZegoCloud UIKits package in our application.

Creating the user interface

Now that we have set up our environment and installed the necessary dependencies, we can start creating the user interface for our chat application.

First, let's create a new file called chat_screen.dart and add the following code to it:

import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  ZegoIMKit zegoIMKit = ZegoIMKit.instance;

  @override
  void initState() {
    super.initState();
    initZegoIMKit();
  }

  void initZegoIMKit() async {
    await zegoIMKit.initSDK(appID, appSign, userID, userName);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Chat App'),
      ),
      body: Container(),
    );
  }
}

In this code, we have imported the necessary packages and created a stateful widget called ChatScreen. We have also created an instance of the ZegoIMKit class and called the initSDK method in the initState method to initialize the ZegoCloud SDK.

Next, we will create the user interface for our chat application. We will add a text field for the user to enter their message and a send button to send the message. We will also display the chat messages in a list view. Add the following code to the build method in ChatScreen:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('My Chat App'),
    ),
    body: Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: 0,
            itemBuilder: (context, index) => Text('Chat message $index'),
          ),
        ),
        Row(
          children: [
            Expanded(
              child: TextField(
                decoration: InputDecoration(hintText: 'Enter a message'),
              ),
            ),
            IconButton(
              icon: Icon(Icons.send),
              onPressed: () {},
            ),
          ],
        ),
      ],
    ),
  );
}

In this code, we have added a column widget that contains a list view for displaying chat messages and a row widget that contains a text field for entering a message and a send button. We have also set the initial itemCount of the list view to zero.

Now that we have created the user interface for our chat application, let's move on to implementing the chat functionality using the ZegoCloud UIKits package.

Implementing the chat functionality

To implement the chat functionality, we need to use the ZegoCloud UIKits package. This package provides a set of APIs for sending and receiving messages in real-time.

First, we need to create a ZegoUser object that represents the current user. We can do this by adding the following code to the initState method:

ZegoUser user = ZegoUser(userID, userName);

Next, we need to join the chat room using the joinChatRoom method. We can do this by adding the following code to the initZegoIMKit method:

await zegoIMKit.joinChatRoom(roomID, user);

In this code, we have joined the chat room using the roomID and the current user object.

Next, we need to listen for incoming messages using the onRecvMessage method. We can do this by adding the following code to the initZegoIMKit method:

zegoIMKit.onRecvMessage = (message) {
  print('Received message: ${message.content}');
};

In this code, we have set the onRecvMessage callback to print the received message to the console.

Finally, we need to send messages using the sendChatMessage method. We can do this by adding the following code to the onPressed method of the send button:

void sendMessage(String content) async {
  ZegoChatMessage message = ZegoChatMessage(
    content: content,
    messageType: ZegoMessageType.text,
    sendTime: DateTime.now().millisecondsSinceEpoch,
    fromUser: user,
  );

  await zegoIMKit.sendChatMessage(roomID, message);
}

IconButton(
  icon: Icon(Icons.send),
  onPressed: () {
    sendMessage(_messageController.text);
    _messageController.clear();
  },
),

In this code, we have created a new ZegoChatMessage object with the message content, type, send time, and the current user object. We have then used the sendChatMessage method to send the message to the chat room.

Now that we have implemented the chat functionality using the ZegoCloud UIKits package, we can run the app and test it out.

Running the app

To run the app, connect your device or emulator and run the following command in your terminal:

flutter run

This will launch the app on your device or emulator. You can enter a message in the text field and tap the send button to send it to the chat room. You should see the message appear in the list view.

Conclusion

In this article, we have discussed how to create a chat app in Flutter using the ZegoCloud UIKits package. We have covered the necessary configuration and permissions settings, as well as the simple code required to implement the chat functionality. By following these steps, you can create a fully functional chat app using the ZegoCloud UIKits package in Flutter.