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.
| 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
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
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")
}
}
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
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';
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());
}
| 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.
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.
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);
});
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)
}
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"];
}
To mute chat notifications from individual users or groups, call the following method:
Mirrorfly.updateChatMuteStatus(jid, muteStatus);
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) {
});
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()));
});
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));
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
});
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);
});
To forward a message to another user or group, activate the following method:
Mirrorfly.forwardMessagesToMultipleUsers(messageIds, userList).then((value) {
});
To delete the chat account, call the below method:
Mirrorfly.deleteAccount(reason, FEEDBACK).then((value) {
}).catchError((error) {
// Error handling
});
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.
Get Started with MirrorFly plugin and Improve your overall in-app conversion, engagement, and retention.
Start adding our messaging APis & SDK to any app right away!
Get StartedNeed SDK integration support? Hire our developers!
Get Full Access To Our Customizable Video, Voice & Chat SDKs!
Request DemoLet us build your chat app. Hire dedicated team!