Let's integrate UIKit Plugin for Flutter

Mirrorfly Flutter UIKit Plugin is a set of prebuilt UI Widgets that allows you to easily integrate an in-app chat with all the essential messaging features. Our development kit includes light and dark themes, text fonts, colors and more. You can customize these components to create an interactive messaging unique interface.


The requirements for Android

  • Android Lollipop 5.1 (API Level 22) or above
  • Java 7 or higher
  • Gradle 4.1.0 or higher
  • targetSdkVersion,compileSdk 34 or above.

The minimum requirements for iOS

  • iOS 12.1 or later

Things to be Noted Before Making a Start#

Mirrorfly License Key#

Note : Before proceeding with CONTUS MirrorFly Flutter UIKit Plugin integration, there must be an SDK license key that needs to be obtained for your MirrorFly application.

To get the License Key,#

Step 1: Register here to get a MirrorFly User account. Registration is subject to verification and would take up to 24 hours.

Step 2: Login to your Account

Step 3: Get the License key from the application Info’ section


Install UIKit#

Create Android dependency#

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

allprojects {
repositories {
maven {
url "https://repo.mirrorfly.com/release"

make sure below attributes are included in the app/build.gradle file in your Android folder.

android {
compileSdk 34 // or higher
defaultConfig {
minSdkVersion 22
targetSdkVersion 34 // or higher

Create iOS dependency#

Step 5: Check and Add the following code at end of your ios/Podfile

post_install do |installer|
installer.aggregate_targets.each do |target|
target.xcconfigs.each do |variant, xcconfig|
xcconfig_path = target.client_root + target.xcconfig_relative_path(variant)
IO.write(xcconfig_path, IO.read(xcconfig_path).gsub("DT_TOOLCHAIN_DIR", "TOOLCHAIN_DIR"))
installer.pods_project.targets.each do |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'
shell_script_path = "Pods/Target Support Files/#{target.name}/#{target.name}-frameworks.sh"
if File::exist?(shell_script_path)
shell_script_input_lines = File.readlines(shell_script_path)
shell_script_output_lines = shell_script_input_lines.map { |line| line.sub("source=\"$(readlink \"${source}\")\"", "source=\"$(readlink -f \"${source}\")\"") }
File.open(shell_script_path, 'w') do |f|
shell_script_output_lines.each do |line|
f.write line

Step 6: Now, enable all the below mentioned capabilities into your project.

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


Create Flutter dependency#

Step 7: Add the below dependencies in pubspec.yaml.

mirrorfly_uikit_plugin: ^1.0.0

STEP 8: Run flutter pub get command in your project directory. You can use all classes and methods just with the following import statement

import 'package:mirrorfly_uikit_plugin/mirrorfly_uikit.dart';

Initialize MirrorFly UIKit Plugin#

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

void main() {
navigatorKey: NAVIGATOR_KEY,
licenseKey: LICENSE_KEY,
chatHistoryEnable: ENABLE_CHAT_HISTORY);
runApp(const MyApp());

UIKIT init Function Description#

FunctionParameter TypeDescription
LICENSE_KEYStringLicense key is required to proceed with registration
iOS_APP_GROUP_IDStringCreate App groups and assign the obtained group container id. Plugin uses this string to create the path for the local storage.
ENABLE_CHAT_HISTORYbooltrue To enable chat history and false for normal chat, default false
NAVIGATOR_KEYKeyGlobalKey for NavigatorState
storageFolderNameStringshould be defined to set your own local path to store app media files. default "Mirrorfly"


Use the below method to register a user in sandbox Live mode.

Unless you log out the session, make a note that should never call the registration method more than once in an application
try {
var response = await MirrorflyUikit.instance.login(userIdentifier: userIdentifier, fcmToken: FCM_TOKEN);
debugPrint("login user $response");
//{'status': true, 'message': 'Register Success};
} catch (e) {
userIdentifierStringA unique Id to Register the User. We accept only the AlphaNumeric String
FCM_TOKENStringA registration token that is generated by FCM Plugin for the user's app instance to send message for free

Note : It is recommended to disallow users to backup an app if it contains sensitive data. Having access to backup files (i.e. when android:allowBackup="true") on AndroidManifest file inside application tag, it is possible to modify/read the content of an app even on a non-rooted device.


Some of the most common terminologies used in Chat SDK with description

userID/userBareIDUnique ID assigned for each user Ex: 12345678 (any alphanumeric). The below characters is not allowed in userId: U+0022 (") U+0026 (&) U+0027 (') U+002F (/) U+003A (:) U+003C (<) U+003E (>) U+0040 (@) userID should follow below specification: https://xmpp.org/extensions/xep-0106.html
userJid (or) JIDuserID+@+domain of the chat server Ex. 12345678@xmpp.chatsystem.dev.contus.us
groupID/groupBareIDUnique ID assigned for each group Ex: group123456 (any alphanumeric). GroupJID = groupID +@mix.+domain of the chat server Ex: group123456@mix.xmpp.mirrorfly.dev.contus.us`

Display Recent Chat list#

Recent Chat Widget is the starting point for launching Flutter UIKit in your application. By implementing the code below, you will see a complete list of recent chats that you're made with single and group conversation.

Note : Use Recent Chat Widget only when you have done the registration.

import 'package:mirrorfly_uikit_plugin/mirrorfly_uikit.dart';
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const DashboardView(title: "Chats",enableAppBar:false);

Note : You can also navigate to Recent Chat Page using below code.

Navigator.push(context, MaterialPageRoute(builder: (con)=> const DashboardView(title: "Chats")));

Note : Great!!! We are now end of the Quick Start section. For Advanced with various module navigation. Click Here