Integrate with Flutter

Experimental Flutter integration guide, proceed with caution

Monterosa's Interaction SDK does not include Flutter packages. However, Flutter supports embedding native views through its platform integration guide. Please note that using Flutter falls outside our SLA terms and conditions

Overview

Monterosa / Interaction SDK allows for the creation of native components that can be integrated into Flutter applications using platform views. This document outlines the integration process for both Android and iOS platforms.

Platform Views

Flutter provides two key mechanisms for embedding native views:

Android: AndroidView is used to host native Android components
iOS: UiKitView is used to embed native iOS views

Integration Steps

1. Prerequisite

This guide assumes you have setup and initialised an instance of the Monterosa / Interaction SDK. Refer to the Get the SDK section if you haven't done so yet or require more information.

2. Create Native Views and View Factories

import Flutter
import MonterosaSDKLauncherKit
import UIKit

class NativeViewFactory: NSObject, FlutterPlatformViewFactory {
    private var messenger: FlutterBinaryMessenger
    
    init(messenger: FlutterBinaryMessenger) {
        self.messenger = messenger
        super.init()
    }
    
    func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> any FlutterPlatformView {
        return NativeUIView(frame: frame, viewIdentifier: viewId, arguments: args, binaryMessenger: messenger)
    }
}

class NativeUIView: NSObject, FlutterPlatformView {
    private var experience: ExperienceView

    init(
        frame: CGRect,
        viewIdentifier viewId: Int64,
        arguments args: Any?,
        binaryMessenger messenger: FlutterBinaryMessenger?
    ) {
        experience = Launcher.getExperience()
        super.init()
    }

    func view() -> UIView {
        return experience
    }
}

import android.content.Context
import android.view.View
import co.monterosa.sdk.launcherkit.ExperienceConfiguration
import co.monterosa.sdk.launcherkit.Launcher
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory

class NativeViewFactory : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
        // You can pass arguements from flutter to your Experience
        return NativeTextView(context, params)
    }
}

class NativeTextView(context: Context, params: Map<String, Any>?) : PlatformView {
    private val config  = ExperienceConfiguration()
    private val experience = Launcher.default.getExperience(context, config)

    override fun getView(): View {
        return experience
    }

    override fun dispose() {

    }
}

3. Register Native View Factories

import Flutter
import UIKit

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
      GeneratedPluginRegistrant.register(with: self)
      
      guard let pluginRegistrar = self.registrar(forPlugin: "plugin-name") else { return false }

      let factory = NativeViewFactory(messenger: pluginRegistrar.messenger())
      pluginRegistrar.register(
        factory,
        withId: "platform-experience-view")
      
      return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

import io.flutter.embedding.android.FlutterActivity

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        flutterEngine
            .platformViewsController
            .registry
            .registerViewFactory("platform-experience-view", NativeViewFactory())
    }
}

4. Embed Native Views in Flutter

Create a Flutter widget that uses the appropriate platform view based on the current platform:

import 'dart:io';
import 'package:flutter/material.dart';

class NativeSDKView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     if (Platform.isAndroid) {
      return AndroidView(
        viewType: "platform-experience-view",
        creationParams: creationParams,
        creationParamsCodec: const StandardMessageCodec(),
        layoutDirection: TextDirection.ltr,
      );
    } else if (Platform.isIOS) {
      return UiKitView(
        creationParams: creationParams,
        creationParamsCodec: const StandardMessageCodec(),
        viewType: "platform-experience-view",
      );
    } else {
      return const Text("Unsupported Platform");
    };
  }
}

You can now use NativeSDKView in your Flutter application to embed the native SDK component.

Advanced Configuration

The platform views can be further customized with creation parameters, layout preferences, and gesture recognizers:

AndroidView(
  viewType: 'platform-experience-view',
  creationParams: {'key': 'value'},
  creationParamsCodec: const StandardMessageCodec(),
  layoutDirection: TextDirection.ltr,
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
    Factory<OneSequenceGestureRecognizer>(() => EagerGestureRecognizer()),
  },
)

Resources

Troubleshooting

If you encounter issues with the native view integration:

Ensure you're using the latest version of the Monterosa SDK and it's properly setup.
Check platform-specific logs for error messages.
Verify that the view type identifiers match between Flutter and native code
Consult the platform-specific documentation for additional configuration requirements

Last updated 10 months ago

hashtagOverview

hashtagPlatform Views

hashtagIntegration Steps

hashtag1. Prerequisite

hashtag2. Create Native Views and View Factories

hashtag3. Register Native View Factories

hashtag4. Embed Native Views in Flutter

hashtagAdvanced Configuration

hashtagResources

hashtagTroubleshooting