User GuideDeveloper GuideAPI
Dashboard

Hybrid App Setup - Flutter SDK (v4)

Note

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

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

Manage Web SDK Commands with the Flutter SDK

Flutter SDK can handle commands related to event transmission, device settings, and user settings carried out by the Web SDK. Configure the Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions before displaying the website in the WebView.

webToken is the Web SDK token. You can find it on the [Settings]>[Tokens] page in the Airbridge dashboard.

postMessageScript is the JavaScript code that passes the payload variable, which stores the commands sent from the Web SDK to the Flutter SDK, to the Flutter area.

command is the command sent from the Web SDK to the Flutter SDK.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
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);',
    );
  }
}

Attention

Was this page helpful?

Have any questions or suggestions?