User GuideDeveloper GuideAPI
Dashboard

Hybrid App Setup - Flutter SDK

Note

Before proceeding with the hybrid app setup, install the iOS SDK and Web SDK.

You can configure the Airbridge Flutter SDK to handle Airbridge-related tasks within the hybrid app's in-app website without modifying the website's code.

Handle Web SDK Commands with the Flutter SDK

The Flutter SDK can handle commands related to event transmission, device settings, and user settings that occur within the Web SDK. Before displaying the website in the web view, configure the Flutter SDK using the Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions.

  • webToken: This is the Web SDK token. Your Web SDK token can be found on the [Settings]>[Tokens] page in the Airbridge dashboard.

  • postMessageScript: This JavaScript code transmits the payload variable, which stores the command passed from the Web SDK to the Flutter SDK, to the Flutter area.

  • command: This command is passed from the Web SDK to the Flutter SDK.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
import 'dart:collection';
import 'package:airbridge_flutter_sdk/airbridge_flutter_sdk.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TestState();
  }
}

class TestState extends State<TestPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: getJavascriptInterface(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        return InAppWebView(
          initialUrlRequest: URLRequest(url: WebUri('YOUR_WEB_URL')),
          onWebViewCreated: (controller) async {
            controller.addJavaScriptHandler(handlerName: 'postMessage', callback: (args) {
            Airbridge.handleWebInterfaceCommand(args[0]);
            return args;
            });
          },
          initialUserScripts: UnmodifiableListView<UserScript>([
            UserScript(
            source: snapshot.requireData ?? "", 
            injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START)
          ]),
        )
      });
  }

  Future<String?> getJavascriptInterface() async {
    return await Airbridge.createWebInterfaceScript(
      webToken: 'YOUR_WEB_SDK_TOKEN',
      postMessageScript: 'window.flutter_inappwebview.callHandler("postMessage", payload);',
    );
  }
}

Note

The webview_flutter package does not support an interface for injecting hybrid setup script code before the page loads. Therefore, we do not provide sample code for webview_flutter. We recommend using flutter_inappwebview instead.

Attention

Was this page helpful?

Have any questions or suggestions?