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 are:

Android Lollipop 5.0 (API Level 21) or above
Java 7 or higher
Gradle 4.1.0 or higher

The minimum requirements for Chat SDK 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: Sign up for a MirrorFly Account

Step 2: Log into 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 {
     google()
     mavenCentral()
     jcenter()
     maven {
         url "https://repo.mirrorfly.com/snapshot/"
     }
 }
}

Create iOS dependency#

Step 5: Check and Add the following code at 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, 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: ^0.0.5

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.initUIKIT(baseUrl: 'YOUR_BASE_URL',
      licenseKey: 'Your_Mirrorfly_Licence_Key',
      googleMapKey: 'Your_Google_Map_Key_for_location_messages',
      iOSContainerID: 'Your_iOS_app_Group_id');
  runApp(const MyApp());
 }

Registration#

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.registerUser(uniqueId);
    debugPrint("register user $response");
    //{'status': true, 'message': 'Register Success};
} catch (e) {
  debugPrint(e.toString());
}

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