How to Launch the QuickBlox Flutter Chat Sample

The QuickBlox Flutter chat sample provides a working cross-platform messaging application that you can run, explore, and adapt for your own project. In this tutorial, you will create a QuickBlox application, download the sample from GitHub, add your credentials, and launch it on an Android or iOS device.

The sample demonstrates common chat functionality including user authentication, private and group conversations, message history, unread-message counts, delivery and read status, and public dialogs.

Prerequisites

Before you begin, make sure you have:

• a QuickBlox account;
• Flutter 2.12.0 or later;
• Android 5.0/API 21 or later, or iOS 13.0 or later;
• Android Studio or Visual Studio Code with Flutter support;
• Git, if you plan to clone the repository;
• an Android emulator, iOS simulator, or physical device;
• Xcode if you intend to run the sample on iOS.

For current Flutter SDK requirements and setup guidance, see the QuickBlox Flutter SDK documentation.

Time: Approximately 20 minutes

---

What Does the Flutter Chat Sample Include?

The QuickBlox Flutter samples repository contains working projects that demonstrate how to use QuickBlox communication features in Flutter applications.

The chat sample includes:

• user login and logout;
• one-to-one and group chat creation;
• public dialogs;
• real-time text messages and emojis;
• message delivery and read status;
• chat history and unread-message counts;
• adding users to an existing group conversation;
• leaving or removing a conversation.

You can use the sample as a reference implementation or as the starting point for your own Flutter messaging interface.

---

Create a QuickBlox Application

The sample requires credentials from a QuickBlox application before it can connect to the platform.

1. Sign in to the QuickBlox Dashboard or create a new account.
2. Select New app.
3. Enter the requested information about your application and organization.
4. Select Create app.
5. Open Dashboard → Your App → Overview.
6. Copy the Application ID, Authorization Key, Authorization Secret, and Account Key.

Keep these credentials available. You will add them to the sample project before running it.

---

Download the Flutter Chat Sample from GitHub

Open the QuickBlox Flutter chat sample on GitHub.

Select Code, and then download the project using one of these options:

• Clone with HTTPS: Copy the repository URL and clone it with Git or your IDE.
• Download ZIP: Download the repository and extract it locally.

If you clone the full repository, the chat application is located in the chat_sample directory. The repository also contains a simple SDK sample and a WebRTC video-calling sample.

Need help cloning the repository? Follow our step-by-step guide to using GitHub with Android Studio.

---

Open the Flutter Chat Sample

Open the downloaded chat_sample project in Android Studio or Visual Studio Code.

Open the Sample in Android Studio

1. Start Android Studio.
2. Select Open.
3. Navigate to the downloaded repository.
4. Select the chat_sample directory.
5. Allow Flutter and the IDE to load the project and resolve its dependencies.

Open the Sample in Visual Studio Code

1. Start Visual Studio Code.
2. Select File → Open Folder.
3. Navigate to the downloaded repository.
4. Select the chat_sample directory.
5. Allow Flutter to load the project dependencies.

 

---

Add Your QuickBlox Application Credentials

In the sample project, open main.dart and locate the application credential constants.

Replace the placeholder values with the credentials copied from Dashboard → Your App → Overview:

• Application ID;
• Authorization Key;
• Authorization Secret;
• Account Key.

Make sure all four values belong to the same QuickBlox application.

Security note: Do not expose production secrets in a public repository. The official QuickBlox documentation recommends keeping the Authorization Key and Authorization Secret on your backend for production applications.

---

Run the Flutter Chat Sample

After adding the credentials, connect a physical device or start an emulator or simulator.

In Android Studio or Visual Studio Code:

1. Select the target device.
2. Run the application.
3. Wait for Flutter to build and install the sample.
4. Sign in and test the available chat functionality.

The sample should now connect to the QuickBlox application associated with your credentials.

---

Next Steps

Once the sample is running, review its project structure and use it as a reference for adding chat to your own Flutter application. You can customize the interface, adapt the authentication flow, add your own user-management logic, or extend the application with attachments, push notifications, and audio or video calling.

Continue with these resources:

• QuickBlox Flutter SDK quick start
• QuickBlox Flutter samples on GitHub
• QuickBlox Flutter SDK on pub.dev
• QuickBlox Developer Discord Community
• QuickBlox Developer Support