Flutter

To integrate Jedlix SDK with your Flutter app, follow these steps. First, follow the tutorials for hosting native views in your Flutter app with Platform Views for Android and iOS.

Then, create a widget to support both platforms:

class JedlixWidget extends StatelessWidget {
    const JedlixWidget({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        // This is used in the platform side to register the view.
        const String viewType = '<platform-view-type>';
        // Pass parameters to the platform side.
        final Map<String, dynamic> creationParams = <String, dynamic>{};
        creationParams["baseUrl"] = "<YOUR BASE URL>";
        creationParams["apiKey"] = "<YOUR API KEY>";
        creationParams["accessToken"] = "<ACCESS TOKEN>";
        creationParams["userId"] = "<USER ID>";

        switch (defaultTargetPlatform) {
            case TargetPlatform.android:
                return PlatformViewLink(
                    viewType: viewType,
                    surfaceFactory:
                        (context, controller) {
                            return AndroidViewSurface(
                                controller: controller as AndroidViewController,
                                gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
                                hitTestBehavior: PlatformViewHitTestBehavior.opaque,
                            );
                        },
                    onCreatePlatformView: (params) {
                        return PlatformViewsService.initSurfaceAndroidView(
                            id: params.id,
                            viewType: viewType,
                            layoutDirection: TextDirection.ltr,
                            creationParams: creationParams,
                            creationParamsCodec: const StandardMessageCodec(),
                            onFocus: () {
                                params.onFocusChanged(true);
                            },
                        )
                        ..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
                        ..create();
                    },
                );
            case TargetPlatform.iOS:
                return UiKitView(
                    viewType: viewType,
                    layoutDirection: TextDirection.ltr,
                    creationParams: creationParams,
                    creationParamsCodec: const StandardMessageCodec(),
                );
            default:
                throw UnsupportedError('Unsupported platform view');
        }
    }
}

Android

Modify the MainActivity class from the Flutter tutorial to inherit from FlutterFragmentActivity. Register a connect session manager:

class MainActivity: FlutterFragmentActivity() {
    private var methodResult: MethodChannel.Result? = null
    private var queryLimit: Int = 0

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        val connectSessionManager = registerConnectSessionManager {
                // read the connect session result
        }
        flutterEngine
            .platformViewsContrller
            .registry
            .registerViewFactory("<platform-view-type>", NativeViewFactory(connectSessionManager, DefaultAuthentication(this)))
    }
}

DefaultAuthentication implementation is the same as in our Android example.

Use the parameters from the shared code to configure JedlixSDK and authenticate the user:

val creationParams = args as Map<String, String>

val baseUrl = URL(creationParams["baseUrl"])
val apiKey = creationParams["apiKey"]
JedlixSDK.configure(baseUrl, apiKey, authentication)

val accessToken = creationParams["accessToken"] as String
val userId = creationParams["userId"] as String
authentication.setCredentials(accessToken, userId)

Start a connect session:

connectSessionManager.startConnectSession(
    userId,
    ConnectSessionType.Vehicle
)

iOS

Define a codec in FLNativeViewFactory to pass arguments to iOS:

public func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
  return FlutterStandardMessageCodec.sharedInstance()
}

Use the parameters from shared code to configure JedlixSDK and authenticate a user:

let creationParams = args as! [String: String]
    let authentication = DefaultAuthentication()
    
    let baseURL = URL(string: creationParams["baseUrl"]!)!
    let apiKey = creationParams["apiKey"]!
    JedlixSDK.configure(baseURL: baseURL, apiKey: apiKey, authentication: authentication)
    
    let accessToken = creationParams["accessToken"]!
    let userId = creationParams["userId"]!
    authentication.authenticate(accessToken: accessToken, userIdentifier: userId)

Implement the DefaultAuthentication class, as shown in the iOS example.

Add ConnectSessionView to your view hierarchy to start a connect session:

ConnectSessionView(
    userIdentifier: userId,
    sessionType: .vehicle
)

With these steps, you have successfully integrated the Jedlix SDK for both Android and iOS in your Flutter app. Now you can use JedlixWidget to display the platform-specific views that handle the connect session.