In this tutorial, you will learn how to build chat functionality into Android apps using Flutter. We will use Android Studio as the development environment and MirrorFly SDKs to add the messaging features in this guide.
Let’s get started!
Step 1 : Signup for a MirrorFly account
Step 2 : Verify your account via your registered email
Step 3 : Log into your account and download the Flutter SDK Package
Step 4 : Extract the packages on your device
Step 5 : Note down the License key, which will be used to authenticate your SDK to the server.
Step 1 : The next step of the project is to set up a flutter app in Android Studio. To do this, you need to open Android Studio IDE and create a Flutter app project.
Step 2 : Next, you’ll need to add MirrorFly dependencies to the project.
Step 3 : Open the app folder and add the packages to pubspec.yaml file.
Step 4 : Next, add the below line to the gradle.properties file, to avoid any kind of library conflicts from the imported package files.
android.enableJetifier=true
Step 5 : For permissions to access different components of the project, you need to add the below permissions to the AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Step 6 : Configure the app/build.gradle file with the License key acquired from your MirrorFly Account Dashboard
plugins {
...
id 'kotlin-android'
id 'kotlin-kapt'
}
android {
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
packagingOptions {
exclude 'META-INF/AL2.0'
exclude 'META-INF/DEPENDENCIES'
exclude 'META-INF/LICENSE'
exclude 'META-INF/LICENSE.txt'
exclude 'META-INF/license.txt'
exclude 'META-INF/NOTICE'
exclude 'META-INF/NOTICE.txt'
exclude 'META-INF/notice.txt'
exclude 'META-INF/ASL2.0'
exclude 'META-INF/LGPL2.1'
exclude("META-INF/*.kotlin_module")
}
}
In the app/build.gradle file of your Flutter project, add the following dependencies:
dependencies {
... // your app dependencies
implementation files('libs/appbase.aar')
implementation files('libs/flycommons.aar')
implementation files('libs/flynetwork.aar')
implementation files('libs/flydatabase.aar')
implementation files('libs/videocompression.aar')
implementation files('libs/xmpp.aar')
}
Add the below modules to your gradle build and configure the required parameters as shown below:
dependencies {
... // your app dependencies
configurations {
all {
exclude group: 'org.json', module: 'json'
exclude group: 'xpp3', module: 'xpp3'
}
}
//For lifecycle listener
implementation 'android.arch.lifecycle:extensions:1.1.1'
annotationProcessor 'android.arch.lifecycle:compiler:1.1.1'
//For GreenDao
implementation 'de.greenrobot:greendao:2.1.0'
//For gson parsing
implementation 'com.google.code.gson:gson:2.8.1'
//for smack implementation
implementation 'org.igniterealtime.smack:smack-android:4.4.4'
implementation 'org.igniterealtime.smack:smack-tcp:4.4.4'
implementation 'org.igniterealtime.smack:smack-im:4.4.4'
implementation 'org.igniterealtime.smack:smack-extensions:4.4.4'
implementation 'org.igniterealtime.smack:smack-sasl-provided:4.4.4'
implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'
implementation 'androidx.multidex:multidex:2.0.1'
implementation 'com.google.android.gms:play-services-location:17.0.0'
//Dagger Dependencies
api 'com.google.dagger:dagger:2.40.5'
kapt 'com.google.dagger:dagger-compiler:2.40.5'
api 'com.google.dagger:dagger-android:2.40.5'
api 'com.google.dagger:dagger-android-support:2.40.5'
kapt 'com.google.dagger:dagger-android-processor:2.40.5'
//coroutines
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.8'
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-test:1.3.8'
//apicalls
implementation 'com.squareup.retrofit2:retrofit:2.6.1'
implementation 'com.squareup.retrofit2:converter-gson:2.6.1'
implementation 'com.squareup.okhttp3:okhttp:4.2.0'
implementation 'com.jakewharton.retrofit:retrofit2-kotlin-coroutines-adapter:0.9.2'
//stetho interceptor
implementation 'com.facebook.stetho:stetho-okhttp3:1.3.1'
//okhttp interceptor
implementation 'com.squareup.okhttp3:logging-interceptor:3.14.3'
//shared preference encryption
implementation 'androidx.security:security-crypto:1.1.0-alpha03'
//for mobile number formatting
implementation 'io.michaelrocks:libphonenumber-android:8.10.1'
}
buildTypes {
debug {
buildConfigField 'String', 'SDK_BASE_URL', '"https://api-preprod-sandbox.mirrorfly.com/api/v1/"'
buildConfigField 'String', 'LICENSE', '"xxxxxxxxxxxxxxxxxxxxxxxxx"'
buildConfigField 'String', 'WEB_CHAT_LOGIN', '"https://webchat-preprod-sandbox.mirrorfly.com/"'
buildConfigField "String", "SUPPORT_MAIL", '"contussupport@gmail.com"'
}
}
Inside the onCreate() method of the Android Application Class, you need to add the ChatSDK builder. This will render all the necessary data to initialize the SDKs.
Kotlin
//For chat logging
LogMessage.enableDebugLogging(BuildConfig.DEBUG)
ChatSDK.Builder()
.setDomainBaseUrl(BuildConfig.SDK_BASE_URL)
.setLicenseKey(BuildConfig.LICENSE)
.setIsTrialLicenceKey(true)
.build()
To send or receive messages via your app, you’ll need a user. With the use of setIsTrialLicenceKey, you’ll be able to create a user either in the sandbox or live mode.
Flutter
FlyChat.registerUser(USER_IDENTIFIER, FCM_TOCKEN).then((value) {
if (value.contains("data")) {
// Get Username and password from the object
}
}).catchError((error) {
// Register user failed print throwable to find the exception details.
});
To connect your chat app to the server, you need to connect your chat app to the server.
Establish the app-server connection using the below connect() method.
Server connected automatically during registration
MirrorFly SDK offer a wide range of interaction-rich features. You can add each one of them as guided below:
Step 1 : Choose App Style
With the Flutter SDK, you can redesign your existing app style and typography. Use the style/ font of your style and then pass it to the MaterialApp class as shown below
Widget build(BuildContext context) {
return GetMaterialApp(
title: "MirrorFly",
theme: MirrorFlyAppTheme.theme,
);
}
Step 2 : Send a Message
Use the below sendTextMessage() method to send the first message using your Flutter app.
FlyChat.sendTextMessage(TEXT, TO_JID, replyMessageId).then((value) {
// you will get the message sent success response
});
Step 3 : Receive a Message
To receive a text message on your app, add the below onMessageReceived() method to get notified on any incoming messages
FlyChat.onMessageReceived.listen(onMessageReceived);
void onMessageReceived(chatMessage) {
//called when the new message is received
}
To conclude, you now know how to use MirrorFly Chat SDKs to add messaging functionalities to your Android apps. Apart from chat, MirrorFly also lets you integrate video calling to your mobile and web apps. We recommend a few tutorials to get started with:
Hope you find this tutorial helpful. Happy developing!
Get Started with MirrorFly SDK and Improve your overall in-app conversion, engagement, and retention.
Integrate our real-time Chat SDKs into any app in < 30 mins
Try it free
Get Full Access To Our Customizable Video, Voice & Chat SDKs!
Contact Sales
