UXCam integration with Flutter

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:

Set Application Screen Names

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 :

Developing packages & plugins

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:

Writing custom platform-specific code

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. \nMost 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.

Android

* 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)

iOS

Setting up IOS integration is straight forward:

// In your Podfile

target 'Runner' do
  pod 'UXCam'
  *other code*  
end

You can do the integration in Swift (which I recommend if you are used to nicer syntax).

Similar explanation with the Android side; listen, checks and execute.

UXCam Dashboard X PSLove Menstrutrack App

That’s about it. If you want a more detailed explanation and example, you can head to Flutter’s website to check out more.

The main point that I want to bring is the easy integration of 3rd party services such as UXCam, that has not yet been created. Here is the link:

Deliver the perfect app experience | UXCam App Analytics

Thanks for reading!