Flutter InAppBrowser Plugin

A Flutter plugin that allows you to open an in-app browser window. This plugin is inspired by the popular cordova-plugin-inappbrowser!

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing plugin code, view the documentation.

Installation

First, add flutter_inappbrowser as a dependency in your pubspec.yaml file.

Usage

Classes:

• InAppBrowser: Native WebView.
• ChromeSafariBrowser: Chrome Custom Tabs on Android / SFSafariViewController on iOS.

Screenshots here.

InAppBrowser class

Create a Class that extends the InAppBrowser Class in order to override the callbacks to manage the browser events. Example:

import 'package:flutter/material.dart';
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';

class MyInAppBrowser extends InAppBrowser {

  @override
  void onLoadStart(String url) {
    print("\n\nStarted $url\n\n");
  }

  @override
  Future onLoadStop(String url) async {
    print("\n\nStopped $url\n\n");

    // call a javascript message handler
    await this.injectScriptCode("window.flutter_inappbrowser.callHandler('handlerNameTest', 1, 5,'string', {'key': 5}, [4,6,8]);");

    // print body html
    print(await this.injectScriptCode("document.body.innerHTML"));

    // console messages
    await this.injectScriptCode("console.log({'testObject': 5});"); // the message will be: [object Object]
    await this.injectScriptCode("console.log('testObjectStringify', JSON.stringify({'testObject': 5}));"); // the message will be: testObjectStringify {"testObject": 5}
    await this.injectScriptCode("console.error('testError', false);"); // the message will be: testError false
    
    // add jquery library and custom javascript
    await this.injectScriptFile("https://code.jquery.com/jquery-3.3.1.min.js");
    this.injectScriptCode("""
      \$( "body" ).html( "Next Step..." )
    """);
    
    // add custom css
    this.injectStyleCode("""
    body {
      background-color: #3c3c3c !important;
    }
    """);
    this.injectStyleFile("https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css");
  }

  @override
  void onLoadError(String url, int code, String message) {
    print("\n\nCan't load $url.. Error: $message\n\n");
  }

  @override
  void onExit() {
    print("\n\nBrowser closed!\n\n");
  }
  
  @override
  void shouldOverrideUrlLoading(String url) {
    print("\n\n override $url\n\n");
    this.loadUrl(url);
  }

  @override
  void onLoadResource(WebResourceResponse response, WebResourceRequest request) {
    print("Started at: " + response.startTime.toString() + "ms ---> duration: " + response.duration.toString() + "ms " + response.url);
  }

  @override
  void onConsoleMessage(ConsoleMessage consoleMessage) {
    print("""
    console output:
      sourceURL: ${consoleMessage.sourceURL}
      lineNumber: ${consoleMessage.lineNumber}
      message: ${consoleMessage.message}
      messageLevel: ${consoleMessage.messageLevel}
    """);
  }

}

MyInAppBrowser inAppBrowser = new MyInAppBrowser();

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();

    // listen for post messages coming from the JavaScript side
    int indexTest = inAppBrowser.addJavaScriptHandler("handlerNameTest", (arguments) async {
      print("handlerNameTest arguments");
      print(arguments); // it prints: [1, 5, string, {key: 5}, [4, 6, 8]]
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Flutter InAppBrowser Plugin example app'),
        ),
        body: new Center(
          child: new RaisedButton(onPressed: () {
            inAppBrowser.open(url: "https://flutter.io/", options: {
               "useShouldOverrideUrlLoading": true,
               "useOnLoadResource": true
             });
          },
          child: Text("Open InAppBrowser")
          ),
        ),
      ),
    );
  }
}

Future<void> InAppBrowser.open

Opens a URL in a new InAppBrowser instance or the system browser.

inAppBrowser.open({String url = "about:blank", Map<String, String> headers = const {}, String target = "_self", Map<String, dynamic> options = const {}});

Opens an url in a new InAppBrowser instance or the system browser.

• url: The url to load. Call encodeUriComponent() on this if the url contains Unicode characters. The default value is about:blank.

• headers: The additional headers to be used in the HTTP request for this URL, specified as a map from name to value.

• target: The target in which to load the url, an optional parameter that defaults to _self.

  • _self: Opens in the InAppBrowser.
  • _blank: Opens in the InAppBrowser.
  • _system: Opens in the system's web browser.

• options: Options for the InAppBrowser.

  All platforms support:

  • useShouldOverrideUrlLoading: Set to true to be able to listen at the shouldOverrideUrlLoading event. The default value is false.
  • useOnLoadResource: Set to true to be able to listen at the onLoadResource() event. The default value is false.
  • clearCache: Set to true to have all the browser's cache cleared before the new window is opened. The default value is false.
  • userAgent_: Set the custom WebView's user-agent.
  • javaScriptEnabled: Set to true to enable JavaScript. The default value is true.
  • javaScriptCanOpenWindowsAutomatically: Set to true to allow JavaScript open windows without user interaction. The default value is false.
  • hidden: Set to true to create the browser and load the page, but not show it. The onLoadStop event fires when loading is complete. Omit or set to false (default) to have the browser open and load normally.
  • toolbarTop: Set to false to hide the toolbar at the top of the WebView. The default value is true.
  • toolbarTopBackgroundColor: Set the custom background color of the toolbat at the top.
  • hideUrlBar: Set to true to hide the url bar on the toolbar at the top. The default value is false.
  • mediaPlaybackRequiresUserGesture: Set to true to prevent HTML5 audio or video from autoplaying. The default value is true.

  Android supports these additional options:

  • hideTitleBar: Set to true if you want the title should be displayed. The default value is false.
  • closeOnCannotGoBack: Set to false to not close the InAppBrowser when the user click on the back button and the WebView cannot go back to the history. The default value is true.
  • clearSessionCache: Set to true to have the session cookie cache cleared before the new window is opened.
  • builtInZoomControls: Set to true if the WebView should use its built-in zoom mechanisms. The default value is false.
  • supportZoom: Set to false if the WebView should not support zooming using its on-screen zoom controls and gestures. The default value is true.
  • databaseEnabled: Set to true if you want the database storage API is enabled. The default value is false.
  • domStorageEnabled: Set to true if you want the DOM storage API is enabled. The default value is false.
  • useWideViewPort: Set to true if the WebView should enable support for the "viewport" HTML meta tag or should use a wide viewport. When the value of the setting is false, the layout width is always set to the width of the WebView control in device-independent (CSS) pixels. When the value is true and the page contains the viewport meta tag, the value of the width specified in the tag is used. If the page does not contain the tag or does not provide a width, then a wide viewport will be used. The default value is true.
  • safeBrowsingEnabled: Set to true if you want the Safe Browsing is enabled. Safe Browsing allows WebView to protect against malware and phishing attacks by verifying the links. The default value is true.
  • progressBar: Set to false to hide the progress bar at the bottom of the toolbar at the top. The default value is true.

  iOS supports these additional options:

  • disallowOverScroll: Set to true to disable the bouncing of the WebView when the scrolling has reached an edge of the content. The default value is false.
  • toolbarBottom: Set to false to hide the toolbar at the bottom of the WebView. The default value is true.
  • toolbarBottomBackgroundColor: Set the custom background color of the toolbat at the bottom.
  • toolbarBottomTranslucent: Set to true to set the toolbar at the bottom translucent. The default value is true.
  • closeButtonCaption: Set the custom text for the close button.
  • closeButtonColor: Set the custom color for the close button.
  • presentationStyle: Set the custom modal presentation style when presenting the WebView. The default value is 0 //fullscreen. See UIModalPresentationStyle for all the available styles.
  • transitionStyle: Set to the custom transition style when presenting the WebView. The default value is 0 //crossDissolve. See UIModalTransitionStyle for all the available styles.
  • enableViewportScale: Set to true to allow a viewport meta tag to either disable or restrict the range of user scaling. The default value is false.
  • suppressesIncrementalRendering: Set to true if you want the WebView suppresses content rendering until it is fully loaded into memory.. The default value is false.
  • allowsAirPlayForMediaPlayback: Set to true to allow AirPlay. The default value is true.
  • allowsBackForwardNavigationGestures: Set to true to allow the horizontal swipe gestures trigger back-forward list navigations. The default value is true.
  • allowsLinkPreview: Set to true to allow that pressing on a link displays a preview of the destination for the link. The default value is true.
  • ignoresViewportScaleLimits: Set to true if you want that the WebView should always allow scaling of the webpage, regardless of the author's intent. The ignoresViewportScaleLimits property overrides the user-scalable HTML property in a webpage. The default value is false.
  • allowsInlineMediaPlayback: Set to true to allow HTML5 media playback to appear inline within the screen layout, using browser-supplied controls rather than native controls. For this to work, add the webkit-playsinline attribute to any <video> elements. The default value is false.
  • allowsPictureInPictureMediaPlayback: Set to true to allow HTML5 videos play picture-in-picture. The default value is true.
  • spinner: Set to false to hide the spinner when the WebView is loading a page. The default value is true.

Example:

inAppBrowser.open('https://flutter.io/', options: {
  "useShouldOverrideUrlLoading": true,
  "useOnLoadResource": true,
  "clearCache": true,
  "disallowOverScroll": true,
  "domStorageEnabled": true,
  "supportZoom": false,
  "toolbarBottomTranslucent": false,
  "allowsLinkPreview": false
});

Events

Event fires when the InAppBrowser starts to load an url.

  @override
  void onLoadStart(String url) {
  
  }

Event fires when the InAppBrowser finishes loading an url.

  @override
  void onLoadStop(String url) {
  
  }

Event fires when the InAppBrowser encounters an error loading an url.

  @override
  void onLoadError(String url, String code, String message) {
  
  }

Event fires when the InAppBrowser window is closed.

  @override
  void onExit() {
  
  }

Event fires when the InAppBrowser webview receives a ConsoleMessage.

  @override
  void onConsoleMessage(ConsoleMessage consoleMessage) {

  }

Give the host application a chance to take control when a URL is about to be loaded in the current WebView.

NOTE: In order to be able to listen this event, you need to set useShouldOverrideUrlLoading option to true.

  @override
  void shouldOverrideUrlLoading(String url) {

  }

Event fires when the InAppBrowser webview loads a resource.

NOTE: In order to be able to listen this event, you need to set useOnLoadResource option to true.

NOTE only for iOS: In some cases, the response.data of a response with text/html encoding could be empty.

  @override
  void onLoadResource(WebResourceResponse response, WebResourceRequest request) {

  }

Future<void> InAppBrowser.loadUrl

Loads the given url with optional headers specified as a map from name to value.

inAppBrowser.loadUrl(String url, {Map<String, String> headers = const {}});

Future<void> InAppBrowser.show

Displays an InAppBrowser window that was opened hidden. Calling this has no effect if the InAppBrowser was already visible.

inAppBrowser.show();

Future<void> InAppBrowser.hide

Hides the InAppBrowser window. Calling this has no effect if the InAppBrowser was already hidden.

inAppBrowser.hide();

Future<void> InAppBrowser.close

Closes the InAppBrowser window.

inAppBrowser.close();

Future<void> InAppBrowser.reload

Reloads the InAppBrowser window.

inAppBrowser.reload();

Future<void> InAppBrowser.goBack

Goes back in the history of the InAppBrowser window.

inAppBrowser.goBack();

Future<void> InAppBrowser.goForward

Goes forward in the history of the InAppBrowser window.

inAppBrowser.goForward();

Future<bool> InAppBrowser.isLoading

Check if the Web View of the InAppBrowser instance is in a loading state.

inAppBrowser.isLoading();

Future<void> InAppBrowser.stopLoading

Stops the Web View of the InAppBrowser instance from loading.

inAppBrowser.stopLoading();

Future<bool> InAppBrowser.isHidden

Check if the Web View of the InAppBrowser instance is hidden.

inAppBrowser.isHidden();

Future<String> InAppBrowser.injectScriptCode

Injects JavaScript code into the InAppBrowser window and returns the result of the evaluation. (Only available when the target is set to _blank or to _self)

inAppBrowser.injectScriptCode(String source);

Future<void> InAppBrowser.injectScriptFile

Injects a JavaScript file into the InAppBrowser window. (Only available when the target is set to _blank or to _self)

inAppBrowser.injectScriptFile(String urlFile);

Future<void> InAppBrowser.injectStyleCode

Injects CSS into the InAppBrowser window. (Only available when the target is set to _blank or to _self)

inAppBrowser.injectStyleCode(String source);

Future<void> InAppBrowser.injectStyleFile

Injects a CSS file into the InAppBrowser window. (Only available when the target is set to _blank or to _self)

inAppBrowser.injectStyleFile(String urlFile);

int InAppBrowser.addJavaScriptHandler

Adds/Appends a JavaScript message handler callback (JavaScriptHandlerCallback) that listen to post messages sent from JavaScript by the handler with name handlerName. Returns the position index of the handler that can be used to remove it with the removeJavaScriptHandler() method.

The Android implementation uses addJavascriptInterface. The iOS implementation uses addScriptMessageHandler

The JavaScript function that can be used to call the handler is window.flutter_inappbrowser.callHandler(handlerName <String>, ...args);, where args are rest parameters. The args will be stringified automatically using JSON.stringify(args) method and then they will be decoded on the Dart side.

inAppBrowser.addJavaScriptHandler(String handlerName, JavaScriptHandlerCallback callback);

bool InAppBrowser.removeJavaScriptHandler

Removes a JavaScript message handler previously added with the addJavaScriptHandler() method in the handlerName list by its position index. Returns true if the callback is removed, otherwise false.

inAppBrowser.removeJavaScriptHandler(String handlerName, int index);

ChromeSafariBrowser class

Create a Class that extends the ChromeSafariBrowser Class in order to override the callbacks to manage the browser events. Example:

import 'package:flutter/material.dart';
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';

class MyInAppBrowser extends InAppBrowser {

  @override
  Future onLoadStart(String url) async {
    print("\n\nStarted $url\n\n");
  }

  @override
  Future onLoadStop(String url) async {
    print("\n\nStopped $url\n\n");
  }

  @override
  void onLoadError(String url, int code, String message) {
    print("\n\nCan't load $url.. Error: $message\n\n");
  }

  @override
  void onExit() {
    print("\n\nBrowser closed!\n\n");
  }
  
}

MyInAppBrowser inAppBrowserFallback = new MyInAppBrowser();

class MyChromeSafariBrowser extends ChromeSafariBrowser {
  
  MyChromeSafariBrowser(browserFallback) : super(browserFallback);

  @override
  void onOpened() {
    print("ChromeSafari browser opened");
  }

  @override
  void onLoaded() {
    print("ChromeSafari browser loaded");
  }

  @override
  void onClosed() {
    print("ChromeSafari browser closed");
  }
}

MyChromeSafariBrowser chromeSafariBrowser = new MyChromeSafariBrowser(inAppBrowserFallback);


void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Flutter InAppBrowser Plugin example app'),
        ),
        body: new Center(
          child: new RaisedButton(onPressed: () {
            chromeSafariBrowser.open("https://flutter.io/", options: {
                  "addShareButton": false,
                  "toolbarBackgroundColor": "#000000",
                  "dismissButtonStyle": 1,
                  "preferredBarTintColor": "#000000",
                },
              optionsFallback: {
                "toolbarTopBackgroundColor": "#000000",
                "closeButtonCaption": "Close"
              });
          },
          child: Text("Open ChromeSafariBrowser")
          ),
        ),
      ),
    );
  }
}

Future<void> ChromeSafariBrowser.open

Opens an url in a new ChromeSafariBrowser instance or the system browser.

• url: The url to load. Call encodeUriComponent() on this if the url contains Unicode characters.

• options: Options for the ChromeSafariBrowser.

• headersFallback: The additional header of the InAppBrowser instance fallback to be used in the HTTP request for this URL, specified as a map from name to value.

• optionsFallback: Options used by the InAppBrowser instance fallback.

Android supports these options:

• addShareButton: Set to false if you don't want the default share button. The default value is true.
• showTitle: Set to false if the title shouldn't be shown in the custom tab. The default value is true.
• toolbarBackgroundColor: Set the custom background color of the toolbar.
• enableUrlBarHiding: Set to true to enable the url bar to hide as the user scrolls down on the page. The default value is false.
• instantAppsEnabled: Set to true to enable Instant Apps. The default value is false.

iOS supports these options:

• entersReaderIfAvailable: Set to true if Reader mode should be entered automatically when it is available for the webpage. The default value is false.
• barCollapsingEnabled: Set to true to enable bar collapsing. The default value is false.
• dismissButtonStyle: Set the custom style for the dismiss button. The default value is 0 //done. See SFSafariViewController.DismissButtonStyle for all the available styles.
• preferredBarTintColor: Set the custom background color of the navigation bar and the toolbar.
• preferredControlTintColor: Set the custom color of the control buttons on the navigation bar and the toolbar.
• presentationStyle: Set the custom modal presentation style when presenting the WebView. The default value is 0 //fullscreen. See UIModalPresentationStyle for all the available styles.
• transitionStyle: Set to the custom transition style when presenting the WebView. The default value is 0 //crossDissolve. See UIModalTransitionStyle for all the available styles.

Example:

chromeSafariBrowser.open("https://flutter.io/", options: {
  "addShareButton": false,
  "toolbarBackgroundColor": "#000000",
  "dismissButtonStyle": 1,
  "preferredBarTintColor": "#000000",
});

Events

Event fires when the ChromeSafariBrowser is opened.

  @override
  void onOpened() {
  
  }

Event fires when the ChromeSafariBrowser is loaded.

  @override
  void onLoaded() {
  
  }

Event fires when the ChromeSafariBrowser is closed.

  @override
  void onClosed() {
  
  }

Screenshots:

InAppBrowser

iOS:

Android:

ChromeSafariBrowser

iOS:

Android: