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.

Requirements#

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

license-key

Install UIKit#

Create Android dependency#

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

allprojects {
  repositories {
      ...
      ...
      jcenter()
      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"))
           end
       end
  
  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'
      
      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
                end
              end
            end
     end
  end
end

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

Capabilities
App Groups

AppGroups

Create Flutter dependency#

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

dependencies:
  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() {
  WidgetsFlutterBinding.ensureInitialized();
  MirrorflyUikit.instance.initUIKIT(
      navigatorKey: NAVIGATOR_KEY,
    licenseKey: LICENSE_KEY,
    iOSContainerID: iOS_APP_GROUP_ID,
    chatHistoryEnable: ENABLE_CHAT_HISTORY);
  runApp(const MyApp());
 }

UIKIT init Function Description#

Function	Parameter Type	Description
LICENSE_KEY	`String`	License key is required to proceed with registration
iOS_APP_GROUP_ID	`String`	Create App groups and assign the obtained group container id. Plugin uses this string to create the path for the local storage.
ENABLE_CHAT_HISTORY	`bool`	`true` To enable chat history and `false` for normal chat, default `false`
NAVIGATOR_KEY	`Key`	GlobalKey for NavigatorState
storageFolderName	`String`	should be defined to set your own local path to store app media files. default "Mirrorfly"

Login#

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) {
  debugPrint(e.toString());
}

Argument	Type	Description
userIdentifier	`String`	A unique Id to Register the User. We accept only the AlphaNumeric String
FCM_TOKEN	`String`	A 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.

Terminology#

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

keyword	Explanation
userID/userBareID	Unique 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) JID	userID+@+domain of the chat server Ex. 12345678@xmpp.chatsystem.dev.contus.us
groupID/groupBareID	Unique 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);

  @override
  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