How To Make A Chat App With ZEGOCLOUD In Flutter
Tags: zegocloud, chatapp, flutter, programming
Published: 2023-05-04 13:14:03

Are you interested in creating your own chat app? Do you want to use Flutter and ZEGOCLOUD to make it happen? Well, you've come to the right place! In this article, we will guide you through the process of creating a chat app using Flutter and ZEGOCLOUD.

What is ZEGOCLOUD?

[ZEGOCLOUD](https://www.zegocloud.com/) is a cloud platform that provides a range of services and tools to help developers build and deploy applications quickly and easily. One of the services that ZEGOCLOUD provides is the [real-time communication](https://www.zegocloud.com/blog/what-is-real-time-communication),which is perfect for building chat applications. 

I've shared a link to a video on my YouTube channel that exhibits a detailed procedure for building a chat app with zegocloud.

{% embed https://youtu.be/R5GN3s7oURg %}

Getting Started

To get started, you will need to have Flutter installed on your machine. If you haven't done so already, head over to the [flutter.dev](https://flutter.dev) and follow the installation instructions.Once you have flutter installed, you can create a new Flutter project using the following command:
`flutter create my_chat_app`

Setting up ZEGOCLOUD

To configure ZEGOCLOUD, begin by creating an account on the [ZEGOCLOUD Admin Console](https://console.zegocloud.com/)  after setting up a new Flutter project. Following this, create a new project and specify the desired use case, such as in-app chat. You'll also need to obtain your project's appID and appSign, which are essential for authenticating your requests to the ZEGOCLOUD API.

Implementing Real-time Communication

Now that you have set up ZEGOCLOUD, it's time to implement real-time communication in your Flutter app. First you will need to add the ZEGOCLOUD Flutter SDK to your project.
You can do this by adding the following dependency to your pubspec.yaml file:
`dependencies:
  zego_zimkit: ^latest_version
`
or run the following command 
`flutter pub add zego_zimkit`

The code below initializes the ZIMKit SDK with the required credentials to enable real-time communication features in your Flutter application. By following the steps outlined in the code comments and obtaining the necessary credentials from the ZEGOCLOUD Admin Console.

```
void main() {
  ZIMKit().init(
    appID: YourSecret.appID, // your appid
    appSign: YourSecret.appSign, // your appSign
  );
  runApp(YourApp());
}
```

```
ZIMKit().connectUser(id: id, name: name).then(_){
    Navigator.of(context).push(
        MaterialPageRoute(
            builder: (context) => const ZIMKitDemoHomePage(),
        ),
    );
}

class ZIMKitDemoHomePage extends StatelessWidget {
  const ZIMKitDemoHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Conversations'),
          actions: const [HomePagePopupMenuButton()],
        ),
        body: ZIMKitConversationListView(
          onPressed: (context, conversation, defaultAction) {
            Navigator.push(context, MaterialPageRoute(
              builder: (context) {
                return ZIMKitMessageListPage(
                  conversationID: conversation.id,
                  conversationType: conversation.type,
                );
              },
            ));
          },
        ),
      ),
    );
  }
}
```
The code above shows how to connect a user to ZIMKit and navigate to the home page. It uses the `ZIMKit().connectUser` method to establish a connection to the user with the given `id` and `name`. Once the connection is established, the app navigates to the `ZIMKitDemoHomePage` using `MaterialPageRoute`.

The `ZIMKitDemoHomePage` is a `StatelessWidget` that displays a list of conversations using `ZIMKitConversationListView`. When a conversation is clicked, the app navigates to the `ZIMKitMessageListPage` widget, which displays the messages for the selected conversation.

The `WillPopScope` widget prevents the user from navigating back from the home page. The `AppBar` widget provides a title and an overflow menu with a `HomePagePopupMenuButton`. The `ZIMKitConversationListView` widget listens for user taps and passes the selected conversation to the `ZIMKitMessageListPage`.

Overall, this code demonstrates how to use ZIMKit to connect to a user, display a list of conversations, and navigate to a conversation's messages.

##Configure Our project in Android and also setup permissions

- Go to your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33

![Gradle file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9b6crzltncc58gu2bb9b.png)

- And in the same file, edit the minSdkVersion
minSdkVersion 21

![Gradle file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqnhqq5jneotq4rzqaa1.png)

- Add app permissions. Open the file your_project/app/src/main/AndroidManifest.xml, and add the following code:

```
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
```

![AndroidManifest.xml file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r36ormb25y4k9ru8nttt.png)

- Prevent code obfuscation.
To prevent obfuscation of the SDK public class names, do the following:
 a.In your project's your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below:

`keep class **.zego.** { *; }`
b.Add the following config code to the release part of the your_project/android/app/build.gradle file.
`proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'`
like this 

![Gradle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4v7atr7rhlbuacl7cw8.png)

##Configuring it for IOS 

- To add permissions, open your_project/ios/Runner/Info.plist, and add the following code to the dict part:

```
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a call</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a call</string>
```

![Permission-ios](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va82zxarffxzxe40zjk2.png)

Here's is the link to github [source code](https://github.com/codewithdarkwa/chat-app)

Conclusion

And there you have it, a complete guide to creating a chat app with ZEGOCLOUD in Flutter! We hope that you found this article helpful and that you are now ready to start building your own chat app. Remember to keep it simple,engage your users, and have fun!