Native Application with Flutter Components

Last Updated:

If your app is native but is using Flutter components, use this guide to be able to track your entire app.

This guide assumes you have prior knowledge of integrating Flutter components into your native app. If you don't, use this official Flutter documentation to learn how this can be done.

In the pubspec.yaml, add the Pendo plugin under the dependencies section:
pendo_sdk: ^2.21.1 (please make sure you are using the latest version)
In the terminal, run: flutter pub get
In your native app folder, run: pod install

 

iOS

You need to init the SDK in the native code and register the plugin:
SDK initialization (sample code):

Swift

import UIKit
import
Flutter
import FlutterPluginRegistrant
import Pendo
class AppDelegate: FlutterAppDelegate {
lazy var flutterEngine = FlutterEngine(name: "my flutter engine")
override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
//Initializing the SDK
let key = "YOUR KEY"
PendoManager.shared().setup(key)
let visitorId = "flutterVisitor"
let accountId = "flutterAccount"
let visitorData = ["Age": 25, "Country": "USA"]
let accountData = ["Tier": "1", "Size": "Enterprise"]
PendoManager.shared().startSession(visitorId, accountId: accountId, visitorData: visitorData, accountData: accountData)
// Runs the default Dart entrypoint with a default Flutter route.
flutterEngine.run()
// Used to connect plugins (only if you have plugins with iOS platform code).
GeneratedPluginRegistrant.register(with: self.flutterEngine)
//Registering the Pendo Plugin
PendoFlutterPlugin.registerWithRegistry(self.flutterEngine)
return super.application(application, didFinishLaunchingWithOptions: launchOptions);
 }

To access the PendoFlutterPlugin.h, include it in the Bridging-Header.h of your app
#import "PendoFlutterPlugin.h"

Objective-C

 
@import Flutter;
 @import Pendo;
 #import "PendoFlutterPlugin.h"
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
NSString *key = @"YOUR KEY";
[[PendoManager sharedManager] setup:key];
NSString *visitorId = @"flutterVisitor";
NSString *accountId = @"flutterAccount";
NSDictionary *visitorData = @{@"Age": @(25), @"Country": @"USA"};
NSDictionary *accountData = @{@"Tier": @"1", @"Size": @"Enterprise"};
[[PendoManager sharedManager] startSession:visitorId accountId:accountId visitorData:visitorData accountData:accountData];

FlutterEngine *flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
// Runs the default Dart entrypoint with a default Flutter route.
[flutterEngine run];
// Used to connect plugins (only if you have plugins with iOS platform code).
[GeneratedPluginRegistrant registerWithRegistry:flutterEngine];
//Registering the Pendo Plugin
[PendoFlutterPlugin registerWithRegistry:flutterEngine];
return YES;
}

 

In AppDelegate file, add or modify the openURL function:


Swift


func application(_ app: UIApplication,open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
if url.scheme?.range(of: "pendo") != nil {
PendoManager.shared().initWith(url)
return true
}
// your code here...
return true
}


Objective-C


- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options{
if ([[url scheme] containsString:@"pendo"]) {
[[PendoManager sharedManager] initWithUrl:url];
return YES;
}
//your code
return YES;
}

 

Now you should be able to use Pendo track event from the Dart side:

 
import 'package:pendo_sdk/pendo_sdk.dart';

await PendoFlutterPlugin.track('name', { 'firstProperty': 'firstPropertyValue', 'secondProperty': 'secondPropertyValue'});

 

Android

1. Add Pendo Repository to build.gradle:

 
repositories {
    maven {
        url "https://software.mobile.pendo.io/artifactory/androidx-release"
    }
    mavenCentral()
}


2. Add Pendo as a dependency to 

 
dependencies {
    implementation group:'sdk.pendo.io' , name:'pendoIO', version:'2.21.+', changing:true
 }


3. Add the following activity to the application AndroidManifest.xml in the tag:

 
<activity android:name="sdk.pendo.io.activities.PendoGateActivity" android:launchMode="singleInstance" android:exported="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:scheme="YOUR-SCHEME"/>
  </intent-filter>
 </activity>


4. Init the SDK from the native and register the plugin:
SDK initialisation(sample code):

Kotlin

package io.tsh.flutterloginembedding

import android.app.Application
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.embedding.engine.FlutterEngineCache
import io.flutter.embedding.engine.dart.DartExecutor
import io.flutter.plugins.GeneratedPluginRegistrant
import sdk.pendo.io.Pendo
import sdk.pendo.io.Pendo.PendoInitParams
import sdk.pendo.io.Pendo.PendoOptions
import java.util.*

class App : Application() {

    companion object {
        const val FLUTTER_ENGINE_ID = "newLoginEngine"
    }

    override fun onCreate() {
        super.onCreate()
        // Instantiate a FlutterEngine.
        val flutterEngine = FlutterEngine(this)

        // Start executing Dart code to pre-warm the FlutterEngine.
        flutterEngine.dartExecutor.executeDartEntrypoint(
            DartExecutor.DartEntrypoint.createDefault()
        )

        // Cache the FlutterEngine to be used by FlutterActivity.
        FlutterEngineCache
            .getInstance()
            .put(FLUTTER_ENGINE_ID, flutterEngine)
val pendoAppKey = "YOUR_KEY"
Pendo.setup(
this,
pendoAppKey,
null,
null)

val visitorId = "flutterVisitor"
val accountId = "flutterAccount"

val visitorData = HashMap<String, Any>()
visitorData.put("age", 27)
visitorData.put("country", "USA")

val accountData = HashMap<String, Any>()
accountData.put("Tier", 1)
accountData.put("Size", "Enterprise")

Pendo.startSession(
visitorId,
accountId,
visitorData,
accountData )
// Used to connect plugins GeneratedPluginRegistrant.registerWith(flutterEngine) } }

 

Was this article helpful?
0 out of 0 found this helpful