More and more packages are being developed in the Flutter pub package such as Firebase, animations and many more. However, certain services does not have integration with Flutter. Which means more opportunity to develop these packages.

Anyway, I am here to talk about how to integrate a 3rd party service (UXCam) with Flutter in Java and Objective C.

UXCam is one of many screen recording services that is out there. What made me choose UXCam from the rest is just this feature:

Basically, you can tag any screen by just passing a string to it. Which saves a lot of time and is pretty easy to implement, if you were to ask me.

The documentation is pretty simple and concise. Wish they put their documentation link at the top of the website so developers can easily click it without scrolling.

Then comes the integrating part, which Flutter done a very good job on documenting and explaining on how to create a package :

Due to how the SDK is created and the service of screen recording, we are going to hard-code it into our app, which Flutter, also explained very well:

Step 1: Create the Flutter platform client

Let’s create a file called UXCam.dart and insert in the following file:

import 'dart:async';



import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

...

class UXCam {

static const _channel = const MethodChannel('com.ur.app/uxcam');



}

This will create a channel that will talk to the native code side of things. The channel name is com.ur.app/uxcam . This will be the name that is being received by the native code.

Now, let’s create the function to initialise the UXCam:

/// Initialise UXCam sdk with the registered api-key static void init(String apiKey) async { final key = {'apiKey': apiKey}; return await _channel.invokeMethod('init',

key).catchError((error) { print('Error: $error.

Most likely initialise with wrong

api key'); }); }

Thus, you can use the function UXCam.init(your-api-key) to start the UXCam. Pretty simple ain’t it? You can create other functions with the UXCam functions.

This basically sends a message ‘init’, with the map {'apiKey': your-api-key} , to the native code.

Step 2: Setting up UXCam in Android (Java)

The documentation for Android and IOS integration to your native side of the app is pretty simple too.

* One thing to note, step one applies to the your-app/android/build.gradle .

Then in your MainActivity.java file:

The MethodChannel class will be listening to any messages that is being activated in the Flutter side of things. Once it hears the message ‘init’, they will get the map object that contains your api key. Then, you can initialise the UXCam with their sdk. That’s simpler than you thought, right?

You can create more functions to do more cool stuff!

However, somehow, the Android screen is blank. But you can check their taps though. Hopefully it can be fixed.

Step 3: Setting up UXCam in IOS (Objective C)