How to Build a Flutter Chat App with the QuickBlox SDK

Use the QuickBlox Flutter SDK to add real-time chat to a cross-platform Flutter application. In this tutorial, you will create a Flutter project, connect it to a QuickBlox application, authenticate a user, create a private chat dialog, receive new-message events, and send your first message.

The same Flutter SDK also supports user management, file attachments, push notifications, custom data, and peer-to-peer audio and video calling for Android and iOS applications.

Prerequisites

Before you begin, make sure you have:

• Flutter installed for your development platform;
• an editor or IDE configured for Flutter development;
• a QuickBlox account and application;
• basic familiarity with Dart and Flutter;
• an Android emulator, iOS simulator, or physical device for testing.

If Flutter is not yet installed, follow the Flutter installation guide before continuing.

Time: Approximately 30 minutes

What Does the QuickBlox Flutter SDK Provide?

The QuickBlox Flutter SDK provides the communication functionality needed to build chat and calling features into a Flutter application from a shared Android and iOS codebase.

The SDK includes modules for:

• Authentication: Authenticate users with passwords and session tokens.
• User management: Register, retrieve, update, and remove user profiles.
• Chat: Connect to the chat server and manage dialogs and messages using XMPP.
• Audio and video calling: Add peer-to-peer calls for one-to-one and small-group communication.
• Content: Store and manage documents, images, videos, and other chat attachments.
• Push notifications: Notify users about new messages, updates, and other events while they are offline.
• Custom Objects: Use QuickBlox key-value storage to create data schemas for your application.

Create a Flutter Project

Open a terminal and create a new Flutter project:

flutter create myapp

Move into the new project directory:

cd myapp

Add the QuickBlox Flutter SDK

Open the pubspec.yaml file in the project root and add the QuickBlox Flutter SDK to the dependencies section:

dependencies:

  quickblox_sdk: 0.19.0

Install the project dependencies according to your normal Flutter workflow.

Run the Flutter Application

Start the application from the project directory:

flutter run

At this stage, you have a working Flutter application, but it does not yet contain chat functionality. The next steps connect it to QuickBlox and enable messaging.

Create a QuickBlox Application

The Flutter application needs QuickBlox credentials before it can connect to the platform.

1. Create a QuickBlox account or sign in with your existing account.
2. Select New app in the QuickBlox Dashboard.
3. Enter the requested information about your application and organization, and then create the application.
4. Open the application credentials screen.
5. Copy the Application ID, Authorization Key, Authorization Secret, and Account Key.

You will use these four values to initialize the SDK.

Initialize the QuickBlox SDK

Add your QuickBlox application credentials:

const String APP_ID = "XXXXX";
const String AUTH_KEY = "XXXXXXXXXXXX";
const String AUTH_SECRET = "XXXXXXXXXXXX";
const String ACCOUNT_KEY = "XXXXXXXXXXXX";

try {
      await QB.settings.init(APP_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY);
    } on PlatformException catch (e) {
     // Some error occured, look at the exception message for more details 
    }

Replace the placeholder values with the credentials from your QuickBlox application.

Authenticate a User

After initializing the SDK, sign the user in with their login and password:

try {
      QBLoginResult result = await QB.auth.login(userLogin, userPassword);

      QBUser qbUser = result.qbUser;
      QBSession qbSession = result.qbSession;
    } on PlatformException catch (e) {
 // Some error occured, look at the exception message for more details     
    }

 

The response provides the authenticated QuickBlox user and session.

Connect to QuickBlox Chat

Once the user has signed in, connect them to the chat service:

try {
      await QB.chat.connect(userId, userPassword);
     } on PlatformException catch (e) {
      // Some error occured, look at the exception message for more details     
     }

 

The application can now create dialogs and exchange messages.

Create a Chat Dialog

A QuickBlox dialog represents a conversation between users. Create a private chat dialog by supplying the participant IDs, dialog name, and dialog type:

final dialogType = QBChatDialogTypes.CHAT;
try {
      QBDialog createdDialog = await QB.chat
          .createDialog(occupantsIds, dialogName, dialogType: dialogType);
      } on PlatformException catch (e) {
           // Some error occured, look at the exception message for more details     
      }

 

Keep the resulting dialog ID available. You will need it when receiving and sending messages.

Subscribe to New-Message Events

Subscribe to chat events so the application can respond when a new message arrives:

String eventName = QBChatEvents.RECEIVED_NEW_MESSAGE;
try {
      await QB.chat.subscribeMessageEvents(dialogId, eventName, (data) {
        //receive a new message

        Map map = new Map.from(data);
        String messageType = map["type"];
        if (messageType == QBChatEvents.RECEIVED_NEW_MESSAGE) {
           Map payload = new Map.from(map["payload"]);
           String messageBody = payload["body"];
           String messageId = payload["id"];
        }
   } on PlatformException catch (e) {
        // Some error occured, look at the exception message for more details    
   }

The event handler extracts the body and ID of each incoming message so that you can display or process it in your application.

Send a Chat Message

You can now send a message to the dialog and save it to the conversation history:

try {
      await QB.chat
          .sendMessage(dialogId, body: messageBody, saveToHistory: true);
      } on PlatformException catch (e) {
             // Some error occured, look at the exception message for more details     
      }

 

Your Flutter application can now authenticate a user, connect to QuickBlox Chat, create a dialog, receive new-message events, and send messages.

Next Steps

This tutorial covers the core workflow for adding real-time messaging to a Flutter application. You can build on it by adding your own conversation interface, loading message history, supporting attachments, configuring push notifications, or introducing audio and video calling.

Continue with these resources:

• QuickBlox Flutter SDK documentation
• QuickBlox Flutter SDK on pub.dev
• QuickBlox Developer Support