How to get started with QuickBlox Flutter SDK

Note: This blog has been updated since it was originally published in January 2020

A growing number of developers are discovering the benefits of building apps with the Flutter framework. Most appealing, the Flutter framework enables developers to build fully-functional applications for both Android & iOS platforms. One codebase for two applications means fewer man-hours and lower development costs. At the same time, Flutter’s rich choice of Material Design and Cupertino widgets, means applications have an native-like UI.

We’ve explored what is Flutter and why it’s a game changer in app development in an earlier blog as well as outlining what’s new in Futter. Today, we’re providing a step-by-step guide for how to build a messenger application using the QuickBlox Flutter SDK.

Why do you need QuickBlox Flutter SDK?

QuickBlox provides a comprehensive Flutter chat SDK available for download from our GitHub repository, that offers all you need to add real time communication to your application, including chat and video calling. It comes with rich documentation and code samples to help you get started.

Our chat SDK for Flutter contains a series of modules that enables you to add stunning functionality to create a modern chat messaging app:

• Authentication. Use this module to create an authentication system for your users based on passwords and session tokens, so that they can enjoy secure sessions.
• User Management. Our SDK provides the necessary tools to manage users by creating passwords, registering new accounts, updating, retrieving, or removing user profiles.
• Flutter Chat. Our messaging API works with the XMPP protocol. With this technology you can manage the connection to the chat server and configure chat dialogs and messages.
• Flutter Video Calls. It’s possible to integrate peer-to-peer audio and video calls for one-to-one and small group communication with our Flutter SDK.
• Content. Use this module to store and manage chat attachments including documents, photos, videos, etc.
• Push notifications. Keep in touch with app users even if they are currently offline by integrating push messaging into your application (e.g. inform them about new messages, promotions, and app updates).
• Custom Objects. This module helps you utilize QuickBlox key-value storage to create different types of data schemas that can be used in your Flutter application.

How to create a Flutter app using QuickBlox SDK?

Getting started

To create a new Flutter chat messaging app with QuickBlox SDK from scratch follow these steps:

1. Install Flutter for your platform.
2. Run flutter create myapp to create a new project.
3. Add QuickBlox Flutter SDK into your project’s dependencies into dependencies section in pubspec.yaml file in your root project dir.

dependencies:
quickblox_sdk: 0.0.1

You’re done with dependencies!

Launching the app

Now you can start the app with flutter run

But the application created is not really a chat messenger yet, right? So now you should create some UI for messages and then use our SDK to make it alive!

To make the SDK work, you should use your QuickBlox application account. To create a QuickBlox application, follow the steps below:

1. Register a new account at https://admin.quickblox.com/signup. Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
2. Create the application by clicking the New app button.
3. Configure the application. Type in information about your organization into the corresponding fields and click the Add button.
4. Go to the screen with credentials. Locate Credentials group box and copy your Application ID, Authorization Key, Authorization Secret and Account Key. This data is needed to run your application on the QuickBlox server.

Turning on QuickBlox SDK

Init credentials:

const String APP_ID = "XXXXX";
const String AUTH_KEY = "XXXXXXXXXXXX";
const String AUTH_SECRET = "XXXXXXXXXXXX";
const String ACCOUNT_KEY = "XXXXXXXXXXXX";
const String API_ENDPOINT = ""; //optional
const String CHAT_ENDPOINT = ""; //optional

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

Now you should sign in:

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     
    }

Once you’ve signed in you can connect to chat:

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

Great! Now since you’re connected to chat – it’s time to send a message to someone.

Let’s create a new dialog:

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     
      }

In order to receive new messages we should tell the SDK to send us events when there are new messages in chat:

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    
   }

So, now we have a dialog, we’ve subscribed for new messages and we’ve created a function to handle incoming messages. Let’s send our first message:

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     
      }

That’s it!

Conclusion

The QuickBlox Flutter chat SDK expedites the process of messaging app development – from designing your initial prototype to final testing. Using our toolkit, you can integrate messaging, and voice & video calling into your app, manage user profiles, content, and data, and much more.

Check out our Flutter documentation & code samples.

For technical queries about using our SDK or recommendations for our product or documentation please submit a ticket to our support team.

Contact us to learn more about how QuickBlox can support your communication needs.