The most appealing side of the Flutter framework is the ability to build a fully-functional application for both Android & iOS platforms. Everything can be done with the help of Dart programming language that has a large community, rich documentation and a variety of libraries in the native languages.
One codebase for two applications means two times fewer man-hours and two times lower development costs. At the same time, due to Flutter’s rich choice of Material Design and Cupertino widgets, your application will have native-like UI.
Recently, we have spoken about the Flutter framework, its capabilities, and its future. We have also announced the release of QuickBlox Flutter SDK. Today, we have prepared a step-by-step guide for building a messenger application using it. Currently, it’s in the alpha stage, and we are ready to hear your feedback and improve the toolkit according to your proposals. You are welcome to download the QuickBlox Flutter SDK from our repo.
Why do you need QuickBlox Flutter SDK?
QuickBlox Flutter SDK offers you all you need to build a chat messaging app. Our toolkit contains helpful methods for implementing the following functionality:
- Authentication. Upon the user’s login to the app, it starts a secure session and the user gets a secure token which is automatically renewed after each API request. The token is live for 2 hours after the last request.
- Users. QuickBlox Flutter SDK has the necessary tools for secure storage, management and updating the user information.
- Chat. Our messaging API works with the XMPP protocol. With its help, you can manage the connection to the chat server.
- Content. Using this module, you can store and manage the attachments: documents, photos, videos, etc.
- Push notifications. They will help you to keep in touch with the users even if they are currently offline. You can inform them about new messages, promotions, app updates, etc. With QuickBlox Flutter SDK, you can integrate push messaging into your application.
- Custom Objects. This module provides you all the necessary tools for managing and updating your records.
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:
- Install Flutter for your platforms
- Run
flutter create myappto create a new project - 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 SDK work you should use your QuickBlox application account. To create a QuickBlox application, follow the steps below:
- 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.
- Create the application by clicking the New app button.
- Configure the application. Type in the information about your organization into corresponding fields and click the Add button.
- Go to the screen with credentials. Locate Credentials group box and copy your Application ID, Authorization Key, Authorization Secret and Account Key. These data 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 signed in you can connect:
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 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 subscribed for new messages and created 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
QuickBlox Flutter SDK is here to speed up the process of messaging app development – from designing the prototype to final testing. Using our toolkit, you can integrate the messenger, voice, and video calling to your app, manage the files and objects. If you have any questions or suggestions, please submit a ticket to our support team.
