Introduction

This guide demonstrates how to add chat to a Flutter App. By the end of this tutorial, you will have built a fully-functional chat app that can send and receive messages.

Minimum Requirements

  • Android 4.4 or later
  • Flutter 2.0.0 or later
  • Dart 2.12.0 or later
  • MirrorFly Chat SDK & License Key

1) Get Your Application Keys

Steps to Build Chat Into Flutter App

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.

#

2) Set Up Flutter Chat App

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"' 
                         } 
                      } 
                         
                     

3) Chat SDK Initialization

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() 
                  

5) Connect To MirrorFly Chat Server

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
                  

6) Add Interaction Features

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 
                      } 
                  

Conclusion

We hope that you enjoyed building chat into your Flutter app using this tutorial!

To give a quick recap, in this guide, we built a fully functional chat app for Flutter to send and receive messages. We explained how to use the MirrorFly Chat SDK to configure your Flutter app to add messaging features into it.

Apart from message exchange functionality, you can also add several interaction features to your chat app using our SDK. Take a quick peek into our rich resource of chat features and UI Kits on our Docs along with guided instructions.

Happy Developing!

Looking to Build a Flutter Chat App With MirrorFly SDK

Get Started with MirrorFly SDK and Improve your overall in-app conversion, engagement, and retention.

  • Average API response 3s
  • 100ms worldwide latency
  • 1 Billion+ Conversations
Try it free
#
Ready To Get Started With Our Lifetime Free Chat SDK?

Integrate our real-time Chat SDKs into any app in < 30 mins

Try it free
#
Get Started With Our Self-hosted Chat Solution Today!

Get Full Access To Our Customizable Video, Voice & Chat SDKs!

Contact Sales