User GuideDeveloper GuideAPI
Dashboard

    Hybrid App Setup - Flutter SDK (v4)

    Notice

    Install the Flutter SDK and Web SDK respectively on the app and website before setting up the hybrid app.

    You can set the Flutter SDK to handle Airbridge related tasks occurring on the in-app website in hybrid apps without changing the website code.

    Manage Web SDK Commands with the Flutter SDK

    Flutter SDK can handle commands related to event transmission, device settings, and user settings that take place in the Web SDK. Set up using Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions before displaying the website in the web view.

    webToken is a Web SDK token. The Web SDK token can be checked in Airbridge dashboard under [Settings]>[Tokens].

    postMessageScript is a JavaScript code that delivers the payload variable, which stores the command passed from the web SDK to the Flutter SDK, to the Flutter area.

    command is the command received from the web SDK delivered 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.data ?? '',
                    injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START)
                ]),
        )
      });
  }


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

    Attention

    Beware following.

    Was this page helpful?

    Have any questions or suggestions?