How to Build a Flutter Chat App with the MirrorFly SDK

Introduction

In this tutorial, you will learn how to add 500+ chat features to your apps using Flutter. We will use MirrorFly SDK to add the features to your app in less than 20 mins.

Don’t have an app?
Use our Sample app! Also, you can integrate the MirrorFly Chat Plugin to build a complete UI in just 5 mins.

Let’s get started!

Minimum Requirements

To start the development, you will need the following requirements:

Android Lollipop 5.0 (API Level 21) or above (For building your Android chat app in Flutter)
Java 7 or higher
Gradle 4.1.0 or higher The minimum requirements for Chat SDK for iOS
iOS 12.1 or later (For building your iOS chat app in Flutter)

Steps To Build Chat Into Flutter App

1) Get Your License Key

Step 1 : Signup for a MirrorFly account

Step 2 : Verify your account via your registered email

Step 3 : Log into your account

Step 4 : Go to the ‘Application info’ section in your Account Overview

Note down the License key, which will be used to authenticate your SDK to the server.

2) Download the SDK

From the list of SDKs, download the Flutter Chat SDK Package.
Extract the packages on your device.
Create a new Flutter project using CLI or any IDE as per your project requirements.

3) Create Dependencies

Android Dependencies:

Spot the build.gradle in the root directory of your Android folder and add the following code.


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

Next, 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") 
                      } 
                   }

iOS Dependencies:

Go to the end of your iOS/Podfile and add the following code:


                      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

Next, you need to enable the App Groups capabilities in your project.

 Goto Project -> Target -> Signing & Capabilities -> Click + at the top left corner -> Search for ‘App Groups’

Flutter Dependencies:

Go to pubspec.yaml and add the following dependencies

 dependencies: mirrorfly_plugin: ^0.0.13

Use the below import statement so that you can use all the methods and classes. Run the flutter pub get command.

 import 'package:mirrorfly_plugin/mirrorfly.dart';

4) Initialization of MirrorFly Plugin

Add the following code in the main function of your main.dart file, before runApp()


                   void main() {  
                      WidgetsFlutterBinding.ensureInitialized();  
                      Mirrorfly.initializeSDK(  
                         licenseKey: LICENSE_KEY,  
                         iOSContainerID: iOS_APP_GROUP_ID,  
                         chatHistoryEnable: ENABLE_CHAT_HISTORY);  
                      runApp(const MyApp());  
                   }

5) Register A User

To register a user in the Sandbox/ Live mode, include the below code:


                   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);  
                   });

6) Send 1:1 Message

You can use the below method to enable sending of messages.


                   var userJid = await Mirrorfly.getJid(username);


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

7) Receive 1:1 Message

Use the below code to enable reception of messages.


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

Conclusion

To conclude, by now you would have known how to use MirrorFly's Flutter Chat SDKs to add messaging functionalities to your Android apps.

Apart from chat, MirrorFly's SDK also lets you integrate voice and video calling capabilities to your mobile and web apps easily.

If you are ready to get started with our Flutter SDKs, we suggest a few tutorials:

Hope you find this tutorial helpful. Happy developing!

FAQs

1. How to implement real-time chat in Flutter?

Here's how you can easily implement real-time chats in Flutter:

Step 1 : Get your license key after signing up with MirrorFly

Step 2 : Download the Flutter chat SDK package

Step 3 : Create a new project and add dependencies

Step 4 : Initialize the MirrorFly plugin

Step 5 : Register a user

Step 6 : Add required chat features

Step 7 : Test and deploy.

2. What are the components of Flutter chat?

Flutter chat usually includes the following components; chat interface, message rendering, user authentication, chat window, notification handling, backend integration, user presence, and several others.

3. Is Flutter a frontend or backend?

Surprisingly, the Flutter framework can be used for both backend and frontend development. But in most of the development scenarios, Flutter is preferred for building intuitive and interactive UIs for web and mobile apps.

4. What is real-time messaging in Flutter?

The real-time chat plugin in Flutter is used by developers to add instant messaging features to Flutter apps. Upon successfully adding this plugin to chat apps, users can send messages, images, and other multimedia content to their peers in real-time.

5. Is Flutter good for Chat UI design?

Yes. Flutter comes as a good option for designing chat UIs as it provides developers with a rich suite of customizable widgets and libraries to build stunning chat interfaces. Additionally, Flutter being a cross-platform compatible framework, you can design UI once and share it across other platforms.

Build Flutter Chat App With MirrorFly SDK