InAppWebView

https://inappwebview.dev/docs/in-app-browsers
Admin
InAppWebView is a Flutter plugin that allows developers to integrate native WebViews (like...
Tokens:4,849
Snippets:35
Trust Score:8.3
Update:3 months ago
Show doc for...
Tokens:
Raw
### Implement and Open InAppBrowser

Source: https://inappwebview.dev/docs/in-app-browsers/in-app-browser

Create a custom class extending InAppBrowser to handle events and use openUrlRequest to launch the browser.

```dart
import 'package:flutter/foundation.dart';  
import 'package:flutter/material.dart';  
import 'package:flutter_inappwebview/flutter_inappwebview.dart';  
  
WebViewEnvironment? webViewEnvironment;  
  
class MyInAppBrowser extends InAppBrowser {  
  MyInAppBrowser({super.webViewEnvironment});  
  
  @override  
  Future onBrowserCreated() async {  
    print("Browser Created!");  
  }  
  
  @override  
  Future onLoadStart(url) async {  
    print("Started $url");  
  }  
  
  @override  
  Future onLoadStop(url) async {  
    print("Stopped $url");  
  }  
  
  @override  
  void onReceivedError(WebResourceRequest request, WebResourceError error) {  
    print("Can't load ${request.url}.. Error: ${error.description}");  
  }  
  
  @override  
  void onProgressChanged(progress) {  
    print("Progress: $progress");  
  }  
  
  @override  
  void onExit() {  
    print("Browser closed!");  
  }  
}  
  
Future main() async {  
  WidgetsFlutterBinding.ensureInitialized();  
  
  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.windows) {  
    final availableVersion = await WebViewEnvironment.getAvailableVersion();  
    assert(availableVersion != null,  
        'Failed to find an installed WebView2 Runtime or non-stable Microsoft Edge installation.');  
  
    webViewEnvironment = await WebViewEnvironment.create(  
        settings:  
            WebViewEnvironmentSettings(userDataFolder: 'YOUR_CUSTOM_PATH'));  
  }  
  
  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {  
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);  
  }  
  
  runApp(  
    const MaterialApp(  
      home: MyApp(),  
    ),  
  );  
}  
  
class MyApp extends StatefulWidget {  
  const MyApp({super.key});  
  
  @override  
  State<MyApp> createState() => _MyAppState();  
}  
  
class _MyAppState extends State<MyApp> {  
  final browser = MyInAppBrowser(webViewEnvironment: webViewEnvironment);  
  
  final settings = InAppBrowserClassSettings(  
      browserSettings: InAppBrowserSettings(hideUrlBar: false),  
      webViewSettings: InAppWebViewSettings(  
          javaScriptEnabled: true, isInspectable: kDebugMode));  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('InAppBrowser Example'),  
      ),  
      body: Center(  
        child: ElevatedButton(  
            onPressed: () {  
              browser.openUrlRequest(  
                  urlRequest: URLRequest(url: WebUri("https://flutter.dev")),  
                  settings: settings);  
            },  
            child: const Text("Open InAppBrowser")),  
      ),  
    );  
  }  
}  
```

--------------------------------

### Define Digital Asset Links in strings.xml

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Configures the asset_statements string resource required for TWA domain verification.

```xml
<resources>  
    <string name="app_name">Flutter Trusted Web Activity</string>  
    <string name="asset_statements">  
        [{  
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],  
            \"target\": {  
                \"namespace\": \"web\",  
                \"site\": \"https://flutter.dev\"}  
        }]  
    </string>  
</resources>  
```

--------------------------------

### Implement and use ChromeSafariBrowser

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Extend the ChromeSafariBrowser class to handle lifecycle events and use the open method to launch a URL with custom settings.

```dart
import 'package:flutter/foundation.dart';  
import 'package:flutter/material.dart';  
import 'package:flutter_inappwebview/flutter_inappwebview.dart';  
  
class MyChromeSafariBrowser extends ChromeSafariBrowser {  
  @override  
  void onOpened() {  
    print("ChromeSafari browser opened");  
  }  
  
  @override  
  void onCompletedInitialLoad(didLoadSuccessfully) {  
    print("ChromeSafari browser initial load completed");  
  }  
  
  @override  
  void onClosed() {  
    print("ChromeSafari browser closed");  
  }  
}  
  
Future main() async {  
  WidgetsFlutterBinding.ensureInitialized();  
  
  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {  
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);  
  }  
  
  runApp(const MaterialApp(home: MyApp()));  
}  
  
class MyApp extends StatefulWidget {  
  const MyApp({super.key});  
  
  @override  
  State<MyApp> createState() => _MyAppState();  
}  
  
class _MyAppState extends State<MyApp> {  
  final browser = MyChromeSafariBrowser();  
  
  @override  
  void initState() {  
    browser.addMenuItem(ChromeSafariBrowserMenuItem(  
        id: 1,  
        label: 'Custom item menu 1',  
        onClick: (url, title) {  
          print('Custom item menu 1 clicked!');  
        }));  
    super.initState();  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('ChromeSafariBrowser Example'),  
      ),  
      body: Center(  
        child: ElevatedButton(  
            onPressed: () async {  
              await browser.open(  
                  url: WebUri("https://flutter.dev/"),  
                  settings: ChromeSafariBrowserSettings(  
                      shareState: CustomTabsShareState.SHARE_STATE_OFF,  
                      barCollapsingEnabled: true));  
            },  
            child: const Text("Open Chrome Safari Browser")),  
      ),  
    );  
  }  
}  
```

--------------------------------

### Define Android Secondary Toolbar Layout

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Create an XML layout file to define the structure and clickable IDs for the secondary toolbar.

```xml
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content"  
    android:background="@android:color/white"  
    android:orientation="horizontal">  
  
    <Button  
        android:id="@+id/button1"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="Button 1" />  
  
    <Button  
        android:id="@+id/button2"  
        android:layout_width="0dp"  
        android:layout_height="wrap_content"  
        android:layout_weight="1"  
        android:text="Button 2" />  
  
</LinearLayout>  
```

--------------------------------

### Configure ChromeSafariBrowserSettings for Android and iOS

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Sets custom Android animations and iOS modal presentation styles for the browser instance.

```dart
ChromeSafariBrowserSettings(  
  // Android  
  startAnimations: [  
    AndroidResource.anim(  
        name: "slide_in_left", defPackage: "android"), // android.R.anim.slide_in_left  
    AndroidResource.anim(  
        name: "slide_out_right", defPackage: "android") // android.R.anim.slide_out_right  
  ],  
  exitAnimations: [  
    AndroidResource.anim(  
        name: "abc_slide_in_top", // androidx.appcompat.R.anim.abc_slide_in_top  
        defPackage:  
            "com.your_android.application_id"),  
    AndroidResource.anim(  
        name: "abc_slide_out_top", // androidx.appcompat.R.anim.abc_slide_out_top  
        defPackage: "com.your_android.application_id")  
  ],  
  
  // iOS  
  presentationStyle: ModalPresentationStyle.OVER_FULL_SCREEN,  
  transitionStyle: ModalTransitionStyle.PARTIAL_CURL  
)  
```

--------------------------------

### Disable Digital Asset Link Verification for Debugging

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Uses ADB to bypass domain verification during development.

```bash
adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://flutter.dev\"' > /data/local/tmp/chrome-command-line"  
```

--------------------------------

### Add custom menu items to InAppBrowser in Flutter

Source: https://inappwebview.dev/docs/in-app-browsers/in-app-browser

Demonstrates implementing a custom InAppBrowser class and adding multiple menu items with unique IDs, icons, and click actions.

```dart
import 'package:flutter/foundation.dart';  
import 'package:flutter/material.dart';  
import 'package:flutter/services.dart';  
import 'package:flutter_inappwebview/flutter_inappwebview.dart';  
  
class MyInAppBrowser extends InAppBrowser {  
  @override  
  Future onBrowserCreated() async {  
    print("Browser Created!");  
  }  
  
  @override  
  Future onLoadStart(url) async {  
    print("Started $url");  
  }  
  
  @override  
  Future onLoadStop(url) async {  
    print("Stopped $url");  
  }  
  
  @override  
  void onExit() {  
    print("Browser closed!");  
  }  
}  
  
Uint8List? dataIcon;  
  
Future main() async {  
  WidgetsFlutterBinding.ensureInitialized();  
  
  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {  
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);  
  }  
  
  dataIcon = (await rootBundle.load('assets/images/flutter-logo.png'))  
      .buffer  
      .asUint8List();  
  
  runApp(  
    const MaterialApp(  
      home: MyApp(),  
    ),  
  );  
}  
  
class MyApp extends StatefulWidget {  
  const MyApp({super.key});  
  
  @override  
  State<MyApp> createState() => _MyAppState();  
}  
  
class _MyAppState extends State<MyApp> {  
  final browser = MyInAppBrowser();  
  
  final settings = InAppBrowserClassSettings(  
      browserSettings: InAppBrowserSettings(  
          hideUrlBar: true,  
          toolbarTopBackgroundColor: Colors.white,  
          presentationStyle: ModalPresentationStyle.POPOVER),  
      webViewSettings: InAppWebViewSettings(  
          isInspectable: kDebugMode));  
  
  @override  
  void initState() {  
    super.initState();  
  
    browser.addMenuItem(InAppBrowserMenuItem(  
      id: 0,  
      title: 'Menu Item 0',  
      iconColor: Colors.black,  
      order: 0,  
      onClick: () {  
        browser.webViewController?.reload();  
      },  
    ));  
  
    browser.addMenuItem(InAppBrowserMenuItem(  
      id: 1,  
      title: 'Menu Item 1',  
      icon: dataIcon,  
      showAsAction: true,  
      order: 2,  
      onClick: () {  
        browser.webViewController?.reload();  
      },  
    ));  
  
    dynamic icon;  
    if ([  
      TargetPlatform.iOS  
    ].contains(defaultTargetPlatform)) {  
      icon = UIImage(systemName: 'ellipsis.circle');  
    } else if (defaultTargetPlatform == TargetPlatform.android) {  
      icon =  
          AndroidResource.drawable(name: 'ic_menu_edit', defPackage: 'android');  
    }  
    browser.addMenuItem(InAppBrowserMenuItem(  
      id: 2,  
      title: 'Menu Item 2',  
      icon: icon,  
      iconColor: Colors.red,  
      showAsAction: true,  
      order: 1,  
      onClick: () {  
        browser.webViewController?.reload();  
      },  
    ));  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('InAppBrowser Menu Items Example'),  
      ),  
      body: Center(  
        child: ElevatedButton(  
            onPressed: () {  
              browser.openUrlRequest(  
                  urlRequest: URLRequest(url: WebUri("https://flutter.dev")),  
                  settings: settings);  
            },  
            child: const Text("Open InAppBrowser")),  
      ),  
    );  
  }  
}  
```

--------------------------------

### ChromeSafariBrowser.updateSecondaryToolbar

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Updates the secondary toolbar configuration at runtime.

```APIDOC
## ChromeSafariBrowser.updateSecondaryToolbar

### Description
Updates the secondary toolbar configuration at runtime on Android.
```

--------------------------------

### Configure iOS Activity Button

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Use ChromeSafariBrowserSettings to define an activity button for the bottom toolbar on iOS.

```dart
ChromeSafariBrowserSettings(  
  activityButton: ActivityButton(  
    templateImage: UIImage(systemName: "sun.max"),  
    extensionIdentifier: "com.your.ios_bundle_identifier.extension_identifier"  
  )  
)  
```

--------------------------------

### Register Asset Statements in AndroidManifest.xml

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Links the asset_statements resource to the application metadata.

```xml
<application  
    android:label="flutter_inappwebview_example"  
    android:icon="@mipmap/ic_launcher">  
    <!-- ... -->  
    <meta-data  
        android:name="asset_statements"  
        android:resource="@string/asset_statements" />  
    <!-- ... -->  
    <activity>  
        <!-- ... -->  
    </activity>  
</application>  
```

--------------------------------

### Add Android Action Button

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Use setActionButton to add a custom button to the top toolbar on Android.

```dart
var actionButtonIcon = await rootBundle.load('assets/images/action-button.png');  
chromeSafariBrowser.setActionButton(ChromeSafariBrowserActionButton(  
  id: 1,  
  description: 'Action Button description',  
  icon: actionButtonIcon.buffer.asUint8List(),  
  onClick: (url, title) {})  
);  
```

--------------------------------

### Implement Android TWA with ChromeSafariBrowser

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Extends ChromeSafariBrowser to handle TWA lifecycle events and opens a URL with isTrustedWebActivity enabled.

```dart
import 'package:flutter/foundation.dart';  
import 'package:flutter/material.dart';  
import 'package:flutter_inappwebview/flutter_inappwebview.dart';  
  
class AndroidTWABrowser extends ChromeSafariBrowser {  
  @override  
  void onOpened() {  
    print("Android TWA browser opened");  
  }  
  
  @override  
  void onCompletedInitialLoad(didLoadSuccessfully) {  
    print("Android TWA browser initial load completed");  
  }  
  
  @override  
  void onClosed() {  
    print("Android TWA browser closed");  
  }  
}  
  
Future main() async {  
  WidgetsFlutterBinding.ensureInitialized();  
  
  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {  
    await InAppWebViewController.setWebContentsDebuggingEnabled(true);  
  }  
  
  runApp(MaterialApp(home: MyApp()));  
}  
  
class MyApp extends StatefulWidget {  
  final ChromeSafariBrowser browser = new AndroidTWABrowser();  
  
  @override  
  _MyAppState createState() => new _MyAppState();  
}  
  
class _MyAppState extends State<MyApp> {  
  @override  
  void initState() {  
    super.initState();  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('Android TWA Example'),  
      ),  
      body: Center(  
        child: ElevatedButton(  
            onPressed: () async {  
              await widget.browser.open(  
                url: WebUri("https://flutter.dev/"),  
                settings:  
                    ChromeSafariBrowserSettings(isTrustedWebActivity: true),  
              );  
            },  
            child: Text("Open Android TWA Browser")),  
      ),  
    );  
  }  
}  
```

--------------------------------

### Validate Origin and Launch Custom Tabs with Headers

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Extends ChromeSafariBrowser to validate a relationship with the target origin and launch a URL with custom headers once the session is verified.

```dart
class MyChromeSafariBrowser extends ChromeSafariBrowser {  
  @override  
  void onServiceConnected() async {  
    // Validate the session as the same origin to allow cross origin headers.  
    await validateRelationship(relation: CustomTabsRelationType.USE_AS_ORIGIN,  
                               origin: WebUri("https://flutter.dev"));  
  }  
  
  @override  
  void onRelationshipValidationResult(  
      CustomTabsRelationType? relation, Uri? requestedOrigin, bool result) async {  
    // Launch Custom Tabs with non-approvelisted Extra Headers  
    // after session was validated as the same origin.  
    await launchUrl(url: WebUri("https://flutter.dev"), headers: {  
      'bearer-token': 'Some token',  
      'redirect-url': 'Some redirect url'  
    });  
  }  
}  
// ...  
final chromeSafariBrowser = MyChromeSafariBrowser();  
chromeSafariBrowser.open();  
```

--------------------------------

### Set Android Secondary Toolbar

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Use setSecondaryToolbar to register the layout and handle click events for specific view IDs.

```dart
chromeSafariBrowser.setSecondaryToolbar(  
  ChromeSafariBrowserSecondaryToolbar(  
    layout: AndroidResource.layout( // matches the "android/app/src/main/res/layout/remote_view.xml" file  
        name: "remote_view",  
        defPackage:  
            "com.your_android.application_id"),  
    clickableIDs: [  
      ChromeSafariBrowserSecondaryToolbarClickableID(  
          id: AndroidResource.id(  
              name: "button1", // ID of the first button  
              defPackage:  
                  "com.your_android.application_id"),  
          onClick: (WebUri? url) {  
            print("Button 1 with $url");  
          }),  
      ChromeSafariBrowserSecondaryToolbarClickableID(  
          id: AndroidResource.id(  
              name: "button2", // ID of the second button  
              defPackage:  
                  "com.your_android.application_id"),  
          onClick: (WebUri? url) {  
            print("Button 2 with $url");  
          }),  
    ]  
  )  
);  
```

--------------------------------

### ChromeSafariBrowser.updateActionButton

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Updates the icon and description of an existing action button at runtime.

```APIDOC
## ChromeSafariBrowser.updateActionButton

### Description
Updates the icon and description of an existing action button at runtime on Android.
```

--------------------------------

### ChromeSafariBrowser.setSecondaryToolbar

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Adds a custom secondary toolbar at the bottom of the browser on Android.

```APIDOC
## ChromeSafariBrowser.setSecondaryToolbar

### Description
Adds a custom secondary toolbar at the bottom using an Android layout resource file and listens for click events on specific view elements.

### Parameters
- **ChromeSafariBrowserSecondaryToolbar** (object) - Required - Configuration object containing the layout resource and a list of clickable IDs with their respective onClick callbacks.
```

--------------------------------

### ChromeSafariBrowser.setActionButton

Source: https://inappwebview.dev/docs/in-app-browsers/chrome-safari-browser

Adds a custom Action button to the top toolbar on Android.

```APIDOC
## ChromeSafariBrowser.setActionButton

### Description
Adds a custom Action button to be displayed on the top toolbar on Android and listens to the click event.

### Parameters
- **ChromeSafariBrowserActionButton** (object) - Required - Configuration object containing id, description, icon, and onClick callback.
```
Tokens:
Raw