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 | iOS 12.1 or later |
| 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 | String | 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.
Add chat features to your Flutter apps - in 10 minutes - with just a few lines of code.
Request Demo
Flutter plugins are components or sets of pre-made libraries & modules that can be easily integrated with the Flutter framework. These plugins allow developers to access platform-specific functionalities for building cross-platform mobile apps.
MirrorFly's Flutter plugins are available on popular repositories like pub. dev and Github where you can visit and download. These plugins help in the seamless integration of chat and call features into communication apps.
The prime advantage of using Flutter plugin is to speed up the mobile app development process. Other benefits include faster deployment, quick integration capabilities, and cost-efficiency.
Moreover, the Flutter framework is the preferred choice for developers when building projects from scratch. Nonetheless, they can also be integrated into existing apps written in native languages like Swift or Java.
Yes. Github does offer a wide range of plugins and extensions for enhancing the app's functionality and reducing the boilerplate code to be written.
And if you are building the Github plugin in Eclipse, then you must have the Lombok Eclipse integration installed.
Here's how you can install the Github plugin:
Step 1 : Navigate to Github's plugin's page
Step 2 : Download the ZIP file and log in to your WordPress site.
Step 3 : Add a new plugin by clicking the upload button.
Step 4 : Choose the plugin file to install and click Install Now.
That's it your plugin is successfully installed.
Add 1000+ video, voice and chat features to your Flutter chat apps in just 10 mins, with MirrorFly’s pre-built plugin.