> ## Documentation Index
> Fetch the complete documentation index at: https://help.airbridge.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Hybrid App Setup - Flutter SDK

<div id="note" />

<Info>
  **Note**

  Before proceeding with the hybrid app setup, install the [iOS SDK](/en/developers/ios-sdk-v4) and [Web SDK](/en/developers/web-sdk).
</Info>

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.

<h2 id="handle-web-sdk-commands-with-the-flutter-sdk">
  Handle Web SDK Commands with the Flutter SDK
</h2>

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](/en/guides/tokens#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.

<CodeGroup>
  ```dart flutter_inappwebview lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
  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);',
      );
    }
  }
  ```
</CodeGroup>

<div id="note-2" />

<Danger>
  **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.
</Danger>

<h2 id="attention">
  Attention
</h2>

<Accordion title="In-app web view event collection">
  Note that with the hybrid app setup, events that occur in the in-app web view must be collected through the Web SDK only. If collected through the App SDK as well, event duplication will occur. If your in-app web view uses a live mobile website, utilize only the Web SDK for event collection.
</Accordion>

<link rel="alternate" hrefLang="en" href="https://help.airbridge.io/en/developers/hybrid-app-settings-flutter-sdk-v4" />

<link rel="alternate" hrefLang="ko" href="https://help.airbridge.io/ko/developers/hybrid-app-settings-flutter-sdk-v4" />
