Introduction

In this article, I will guide you through the step-by-step process of integrating the Flutter plugin to create your In-app chat. For demonstration and explanation purposes, I use MirrorFly here.

By the end of this tutorial, you will have every piece of information and code needed to build a supercharged In app chat with exceptional features like WhatsApp, Messenger, etc.

Let’s integrate the Flutter chat plugin in < 10 minutes with a quick start.

Requirements

Android iOS
Android Lollipop 5.0 (API Level 2) or above String
Java 7 or higher
Gradle 4.1.0 or higher

Note: You can also get these codes from MirrorFly flutter plugin in pub.dev

1) MirrorFly License Key

Step 1 : Sign up for the MirrorFly console page and choose the plan that best fits your project requirements.

Step 2 : Get license key

Step 3 : Download our SDKs

Note: Install UI Kit for quick integration and personalized experience

2) Create Android Dependency

Step 4 : Add the following to your root build.gradle file in your Android folder


                     allprojects { 
                           repositories { 
                              google() 
                              mavenCentral() 
                              jcenter() 
                              maven { 
                                    url "https://repo.mirrorfly.com/snapshot/" 
                              } 
                           } 
                     } 
                     

Add the following dependencies in the app/build.gradle file:


                      android { 
                          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") 
                            } 
                      } 

                     

3) Create iOS Dependency

Step 5 : Examine and include the following code to the end of your ios/podfile


                                post_install do |installer| 
                               installer.pods_project.targets.each do |target| 
                                  flutter_additional_ios_build_settings(target) 
                                  target.build_configurations.each do |config| 
                                     config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.1' 
                                     config.build_settings['ENABLE_BITCODE'] = 'NO' 
                                     config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No' 
                                     config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES' 
                                     config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"       
                                  end 
                               end 
                               end 


                     

Step 6 : Now, activate all of the functionalities listed below in your project.


                         Goto Project -> Target -> Signing & Capabilities -> Click + at the top left corner -> Search for the capabilities below 
                         
                     

4). Create Flutter Dependency

Step 7 : Add the below dependencies to the pubspec.yaml file


                            dependencies:
                            mirrorfly_plugin: ^0.0.7
                     

Step 8 : In your project directory, run the flutter pub get command. All classes and methods can be used using the following import declaration.


                         import 'package:mirrorfly_plugin/mirrorfly.dart';   
                     

5) Initialize MirrorFly Flutter Chat Plugin

To initialize the plugin, place the following code inside the main function before runApp() in your main.dart file.


                      void main() { 
                      WidgetsFlutterBinding.ensureInitialized(); 
                      Mirrorfly.init( 
                         baseUrl: 'https://api-preprod-sandbox.mirrorfly.com/api/v1/', 
                         licenseKey: 'Your_Mirrorfly_Licence_Key', 
                         iOSContainerID: 'Your_iOS_app_Group_id'); 
                      runApp(const MyApp()); 
                      }   
                  

Chat init Function Description

Funtion Parameter type Description
baseUrl licenseKey Url to make API calls
licenseKey String LicenseKey to proceed with registration
iOSContainerID String Assign the group container ID that was received when creating app groups. This string is used by the plugin to generate the local storage path.

Note: If the basic URL does not contain the Http/Https protocol and is not closed with a "slash (/)", an error message will pop up.

Registration

To register a user in Sandbox Live mode, follow the instructions below.


                       Mirrorfly.registerUser(userIdentifier).then((value) { 
                         // you will get the user registration response 
                         var userData = registerModelFromJson(value); 
                      }).catchError((error) { 
                            // Register user failed print throwable to find the exception details. 
                            debugPrint(error.message); 
                      }); 
                         
                  

*Note: The registerUser function above will accept and pass the FCM_TOKEN as an optional parameter during registration. Once registration is complete, an automatic connection will be made a separate login is not necessary.

Send a one-to-one message

To send one-to-one message to another user, call the below method


                      var userJid = await Mirrorfly.getJid(username);
                  

                      Mirrorfly.sendTextMessage(message, jid).then((value) { 
                         // you will get the message sent success response 
                         var chatMessage = sendMessageModelFromJson(value); 
                      }); 
                         
                  

Receive a one-to-one message

To call a listener when a message is received from another user, follow the below method


                      Mirrorfly.onMessageReceived.listen(result){ 
                         // you will get the new messages 
                         var chatMessage = sendMessageModelFromJson(result) 
                      } 
                  

Group chat

To make complete group chat settings like typing status, sending and receiving group messages, call the below method


                   Mirrorfly.onGroupTypingStatus.listen(result) { 
                      var data = json.decode(result.toString()); 
                      var groupJid = data["groupJid"]; 
                      var groupUserJid = data["groupUserJid"]; 
                      var status = data["status"]; 
                   } 
                      
                  

Mute User/Group

To mute chat notifications from individual users or groups, call the following method:


                      Mirrorfly.updateChatMuteStatus(jid, muteStatus); 
                  

Last Seen

To get the last seen time of a user, follow the below method


                      Mirrorfly.getUserLastSeenTime(jid).then((String? value) {
                             }); 
                  

To hide the last seen time of a user, follow the below method


                      Mirrorfly.isHideLastSeenEnabled().then((bool? value) {
                           }); 
                  

Get user or group profile updates

To get profile update for a chat user, call the below method


                      Mirrorfly.getProfileDetails(jid, fetchFromServer).then((value) { 
                      var data = Profile.fromJson(json.decode(value.toString())); 
                      }); 
                  

Get Recent Chat

To get the recent chat history of a user or group, initiate the below method


                      var value  = await Mirrorfly.getRecentChatOf(jid);
                          var data = RecentChatData.fromJson(json.decode(value));
                  

Get Recent Chat List

To get the recent chat list of a user or group, call the below method,


                         Mirrorfly.getRecentChatList().then((value) { 
                         var data = recentChatFromJson(value); 
                         }).catchError((error) { 
                         // Error handling 
                         }); 
                  

Search Chat Conversations

To search for a messenger similar message from one-to-one or group conversations, call the following method:


                         await Mirrorfly.searchConversation(searchKey).then((value) { 
                         var result = chatMessageModelFromJson(value); 
                         });  
                  

Forward messages

To forward a message to another user or group, activate the following method:


                   Mirrorfly.forwardMessagesToMultipleUsers(messageIds, userList).then((value) { 
                   }); 
                  

Delete Account

To delete the chat account, call the below method:


                      Mirrorfly.deleteAccount(reason, FEEDBACK).then((value) { 
                      }).catchError((error) { 
                         // Error handling 
                      }); 
                  

Final words

Gratitude for reaching this far and investing your time. I hope this tutorial best fits your needs. You can also get the above-mentioned MirrorFly Flutter plugin code from our GitHub page.

With the above-mentioned code, you can build an Inapp chat with essential features and premium functionalities. If you still have any queries to discuss, check out our documentation page or talk with an expert to guide you through the integration process.

mirrorfly

Looking to Build a Flutter Chat App With MirrorFly plugin

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

  • Topic-based Chat
  • Upload Large Files
  • Multi-tenancy support
  • Lite Chat App
  • Hire Dedicated Team
mirrorfly support team
Integrate Our Chat SDK In Just 10 Mins!

Start adding our messaging APis & SDK to any app right away!

Get Started

Need SDK integration support? Hire our developers!

mirrorfly sales team
Get Started With Our Self-hosted Chat Solution Today!

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

Request Demo

Let us build your chat app. Hire dedicated team!

Need to build a complete chat app? Let our experts help you out.
Hire Our Team