QuickBlox SDK helps you implement real-time chat, video chat, and push notifications to your app. You can fully concentrate on your mobile app development.

​
Start with sample app

Choose the code sample below to jump-start the development. We use GitHub repositories to make it easy to explore, copy, and modify our code samples. The guide on how to launch and configure the sample app is on GitHub.

Flutter Chat Sample App

View on GitHub
Documentation

​
Flutter Chat Sample App

View on GitHub Documentation For more samples, head to our Code Samples page. These sample apps are available on GitHub so feel free to browse them there.

​
Get application credentials

QuickBlox application includes everything that brings messaging right into your application - chat, video calling, users, push notifications, etc. To create a QuickBlox application, follow the steps below:
  1. Register a new account following this link. Type in your email and password to sign in. You can also sign in with your Google or GitHub accounts.
  2. Create the app clicking New app button.
  3. Configure the app. Type in the information about your organization into corresponding fields and click Add button.
  4. Go to Dashboard => YOUR_APP => Overview section and copy your Application ID, Authorization Key, Authorization Secret, and Account Key .

​
Requirements

The minimum requirements for QuickBlox Flutter SDK are:
  • iOS 13.0
  • Android (minimum version 5.0, API 21)
  • Flutter (minimum version 2.12.0)

​
Install QuickBlox SDK into your app

To manage project dependencies Flutter should be installed.
To connect QuickBlox to your app just add it into your project dependencies in pubspec.yaml file located in the root project directory => dependencies section.
YAML
dependencies:
  flutter:
    sdk: flutter

  # The following adds the QuickBlox SDK to your application.
  quickblox_sdk: 0.17.0

​
Send your first message

​
Initialize QuickBlox SDK

Initialize the framework with your application credentials. Pass appId, authKey, authSecret, accountKey to the init() method using the code snippet below.
Dart
String appId = 76730;
String authKey = "XydaWcf8OO9xhGT";
String authSecret = "iiohfdija792hjt";
String accountKey = "7yvNe17TnjNUqDoPwfqp";

void init() async {
  try {
    await QB.settings.init(appId, authKey, authSecret, accountKey);
  } on PlatformException catch (e) {
    // Some error occurred, look at the exception message for more details
  }
}
You must initialize SDK before calling any methods through the SDK, except for the init() method. If you attempt to call a method without connecting, the error is returned.
SecurityIt’s not recommended to keep your authKey and authSecret inside an application in production mode, instead of this, the best approach will be to store them on your backend and initialize QuickBlox SDK with applicationId and acountKey only. More details you can find in Initialize QuickBlox SDK without Authorization Key and Secret section.

​
Authorize user

Now, it is time to log in with the user. To get it done, set the login and password of the user, call the login() method and pass the login and password to it using the code snippet below.
Dart
String login = "chrispeterson";
String password = "superPassword";

void login() async {
  try {
    QBLoginResult result = await QB.auth.login(login, password);
    QBUser qbUser = result.qbUser;
    QBSession qbSession = result.qbSession;
  } on PlatformException catch (e) {
     // Some error occurred, look at the exception message for more details
  }
}

​
Connect to chat

Having authorized a user, you can proceed with connecting to the chat server to start using Chat module functionality. Call the connect() method and pass userId and password to it.
Dart
int userId = 38457619;
String password = "superPassword";

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

​
Create dialog

QuickBlox provides three types of dialogs: 1-1 dialog, group dialog, and public dialog. Learn more about dialogs here. Let’s create a simple 1-1 dialog. Call the createDialog() method and pass the occupantsIds, dialogName, and dialogType to it.
Dart
List<int> occupantsIds = [98987887, 76894569];
String dialogName = "test dialog";
int dialogType = QBChatDialogTypes.CHAT;

void createDialog() async {
  try {
    QBDialog? createdDialog = await QB.chat.createDialog(occupantsIds, dialogName, dialogType: dialogType);
    if(createdDialog != null) {
      String _dialogId = createdDialog.id!;
    }
  } on PlatformException catch (e) {
    // Some error occurred, look at the exception message for more details
  }
}

​
Subscribe to receive messages

QuickBlox SDK emits events to notify about chat events. Thus, when a message has been received, a user receives the event from SDK about a new incoming message. To process events, you need to provide an event handler that SDK will call. See the code snippet below.
Dart
String eventName = QBChatEvents.RECEIVED_NEW_MESSAGE;

void subscribeNewMessage() async {
  try {
    await QB.chat.subscribeChatEvent(eventName, (data) {
      Map<dynamic, dynamic> map = Map<dynamic, dynamic>.from(data);
      Map<dynamic, dynamic> payload = Map<dynamic, dynamic>.from(map["payload"]);
      String messageId = payload["id"] as String;
    }, onErrorMethod: (error) {
      // Some error occurred, look at the exception message for more details
    });
  } on PlatformException catch (e) {
    // Some error occurred, look at the exception message for more details
  }
}

​
Send message

To send a message, call the sendMessage() method and pass the dialogId and body as arguments to it.
Dart
String dialogId = "8b75a6c7191285499d890a81df4ee7fe49bc732a";
String body = "hey there!";
bool saveToHistory = true;

void sendMessage() async {
  try {
    await QB.chat.sendMessage(dialogId, body: body, saveToHistory: saveToHistory);
  } on PlatformException catch (e) {
    // Some error occurred, look at the exception message for more details
  }
}
Set the saveToHistory parameter if you want this message to be saved in chat history.