flutter_inappbrowser 0.5.51

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 93

Flutter InAppBrowser Plugin Share on Twitter Share on Facebook

Pub Awesome Flutter License

Donate to this project using Paypal Donate to this project using Patreon

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

Requirements

  • Dart sdk: ">=2.1.0-dev.7.1 <3.0.0"
  • Flutter: ">=0.10.1 <2.0.0"

IMPORTANT Note for iOS

To be able to use this plugin on iOS, you need to create the Flutter App with flutter create -i swift (see flutter/flutter#13422 (comment)), otherwise, you will get this message:

=== BUILD TARGET flutter_inappbrowser OF PROJECT Pods WITH CONFIGURATION Debug ===
The “Swift Language Version” (SWIFT_VERSION) build setting must be set to a supported value for targets which use Swift. Supported values are: 3.0, 4.0, 4.2. This setting can be set in the build settings editor.

that is not true! The Swift version that I have used is already a supported value: 4.0.

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:

  • InAppWebView: Flutter Widget for adding an inline native WebView integrated in the flutter widget tree. [Available only for Android (AndroidView) at this moment. For iOS, it will be available as soon as the Flutter team will release the corresponding dart class.].
  • InAppBrowser: In-App Browser using native WebView.
  • ChromeSafariBrowser: In-App Browser using Chrome Custom Tabs on Android / SFSafariViewController on iOS.
  • InAppLocalhostServer: This class allows you to create a simple server on http://localhost:[port]/. The default port value is 8080.
  • CookieManager: Manages the cookies used by WebView instances. NOTE for iOS: available from iOS 11.0+.

See the online docs to get the full documentation.

InAppWebView class

Flutter Widget for adding an inline native WebView integrated in the flutter widget tree.

AndroidView is not officially stable yet! So, if you want use it, you can but you will have some limitation such as the inability to use the keyboard!

Available only for Android (AndroidView) at this moment. For iOS, it will be available as soon as the Flutter team will release the corresponding dart class.

Use InAppWebViewController to control the WebView instance. Example:

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

Future main() async {
  runApp(new MyApp());
}

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

class _MyAppState extends State<MyApp> {

  InAppWebViewController webView;
  String url = "";
  double progress = 0;

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Inline WebView example app'),
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(20.0),
                child: Text("CURRENT URL\n${ (url.length > 50) ? url.substring(0, 50) + "..." : url }"),
              ),
              (progress != 1.0) ? LinearProgressIndicator(value: progress) : null,
              Expanded(
                child: Container(
                  margin: const EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.blueAccent)
                  ),
                  child: InAppWebView(
                    initialUrl: "https://flutter.io/",
                    initialHeaders: {

                    },
                    initialOptions: {

                    },
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {
                      print("started $url");
                      setState(() {
                        this.url = url;
                      });
                    },
                    onProgressChanged: (InAppWebViewController controller, int progress) {
                      setState(() {
                        this.progress = progress/100;
                      });
                    },
                  ),
                ),
              ),
              ButtonBar(
                alignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Icon(Icons.arrow_back),
                    onPressed: () {
                      if (webView != null) {
                        webView.goBack();
                      }
                    },
                  ),
                  RaisedButton(
                    child: Icon(Icons.arrow_forward),
                    onPressed: () {
                      if (webView != null) {
                        webView.goForward();
                      }
                    },
                  ),
                  RaisedButton(
                    child: Icon(Icons.refresh),
                    onPressed: () {
                      if (webView != null) {
                        webView.reload();
                      }
                    },
                  ),
                ],
              ),
            ].where((Object o) => o != null).toList(),
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.mail),
              title: Text('Item 2'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: Text('Item 3')
            )
          ],
        ),
      ),
    );
  }
}

Screenshots:

  • Android:

android

InAppWebView.initialUrl

Initial url that will be loaded.

InAppWebView.initialFile

Initial asset file that will be loaded. See InAppWebView.loadFile() for explanation.

InAppWebView.initialData

Initial InAppWebViewInitialData that will be loaded.

InAppWebView.initialHeaders

Initial headers that will be used.

InAppWebView.initialOptions

Initial options that will be used.

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.
  • mediaPlaybackRequiresUserGesture: Set to true to prevent HTML5 audio or video from autoplaying. The default value is true.

Android supports these additional options:

  • 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.

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.
  • 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.

Events

Event onWebViewCreated fires when the InAppWebView is created.

InAppWebView(
    initialUrl: "https://flutter.io/",
    onWebViewCreated: (InAppWebViewController controller) {}
}

Event onLoadStart fires when the InAppWebView starts to load an url.

InAppWebView(
    initialUrl: "https://flutter.io/",
    onLoadStart: (InAppWebViewController controller, String url) {}
}

Event onLoadStop fires when the InAppWebView finishes loading an url.

InAppWebView(
    initialUrl: "https://flutter.io/",
    onLoadStop: (InAppWebViewController controller, String url) {}
}

Event onLoadError fires when the InAppWebView encounters an error loading an url.

InAppWebView(
    initialUrl: "https://flutter.io/",
    onLoadError: (InAppWebViewController controller, String url, int code, String message) {}
}

Event onProgressChanged fires when the current progress (range 0-100) of loading a page is changed.

InAppWebView(
    initialUrl: "https://flutter.io/",
    onProgressChanged: (InAppWebViewController controller, int progress) {}
}

Event onConsoleMessage fires when the InAppWebView receives a ConsoleMessage.

InAppWebView(
    initialUrl: "https://flutter.io/",
    onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {}
}

shouldOverrideUrlLoading: 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.

InAppWebView(
    initialUrl: "https://flutter.io/",
    shouldOverrideUrlLoading: (InAppWebViewController controller, String url) {}
}

Event onLoadResource fires when the InAppWebView 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.

InAppWebView(
    initialUrl: "https://flutter.io/",
    onLoadResource: (InAppWebViewController controller, WebResourceResponse response, WebResourceRequest request) {}
}

Event onScrollChanged fires when the InAppWebView scrolls. x represents the current horizontal scroll origin in pixels. y represents the current vertical scroll origin in pixels.

InAppWebView(
    initialUrl: "https://flutter.io/",
    onScrollChanged: (InAppWebViewController controller, int x, int y) {}
}

Future InAppWebViewController.getUrl

Gets the URL for the current page. This is not always the same as the URL passed to InAppWebView.onLoadStarted because although the load for that URL has begun, the current page may not have changed.

inAppWebViewController.getUrl();

Future InAppWebViewController.getTitle

Gets the title for the current page.

inAppWebViewController.getTitle();

Future InAppWebViewController.getProgress

Gets the progress for the current page. The progress value is between 0 and 100.

inAppWebViewController.getProgress();

Future> InAppWebViewController.getFavicon

Gets the favicon for the current page.

inAppWebViewController.getFavicon();

Future InAppWebViewController.loadUrl

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

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

Future InAppWebViewController.postUrl

Loads the given url with postData using POST method into this WebView.

inAppWebViewController.postUrl(String url, Uint8List postData);

Future InAppWebViewController.loadData

Loads the given data into this WebView, using baseUrl as the base URL for the content. The mimeType parameter specifies the format of the data. The encoding parameter specifies the encoding of the data.

inAppWebViewController.loadData(String data, {String mimeType = "text/html", String encoding = "utf8", String baseUrl = "about:blank"});

Future InAppWebViewController.loadFile

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

To be able to load your local files (html, js, css, etc.), you need to add them in the assets section of the pubspec.yaml file, otherwise they cannot be found!

Example of a pubspec.yaml file:

...

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - assets/index.html
    - assets/css/
    - assets/images/

...

Example of a main.dart file:

...
inAppWebViewController.loadFile("assets/index.html");
...
inAppWebViewController.loadFile(String assetFilePath, {Map<String, String> headers = const {}});

Future InAppWebViewController.reload

Reloads the InAppWebView window.

inAppWebViewController.reload();

Future InAppWebViewController.goBack

Goes back in the history of the InAppWebView window.

inAppWebViewController.goBack();

Future InAppWebViewController.canGoBack

Returns a boolean value indicating whether the InAppWebView can move backward.

inAppWebViewController.canGoBack();

Future InAppWebViewController.goForward

Goes forward in the history of the InAppWebView window.

inAppWebViewController.goForward();

Future InAppWebViewController.canGoForward

Returns a boolean value indicating whether the InAppWebView can move forward.

inAppWebViewController.canGoForward();

Future InAppWebViewController.goBackOrForward

Goes to the history item that is the number of steps away from the current item. Steps is negative if backward and positive if forward.

inAppWebViewController.goBackOrForward(int steps);

Future InAppWebViewController.canGoBackOrForward

Returns a boolean value indicating whether the InAppWebView can go back or forward the given number of steps. Steps is negative if backward and positive if forward.

inAppWebViewController.canGoBackOrForward(int steps);

Future InAppWebViewController.goTo

Navigates to a WebHistoryItem from the back-forward WebHistory.list and sets it as the current item.

inAppWebViewController.goTo(WebHistoryItem historyItem);

Future InAppWebViewController.isLoading

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

inAppWebViewController.isLoading();

Future InAppWebViewController.stopLoading

Stops the Web View of the InAppWebView instance from loading.

inAppWebViewController.stopLoading();

Future InAppWebViewController.injectScriptCode

Injects JavaScript code into the InAppWebView window and returns the result of the evaluation.

inAppWebViewController.injectScriptCode(String source);

Future InAppWebViewController.injectScriptFile

Injects a JavaScript file into the InAppWebView window.

inAppWebViewController.injectScriptFile(String urlFile);

Future InAppWebViewController.injectStyleCode

Injects CSS into the InAppWebView window.

inAppWebViewController.injectStyleCode(String source);

Future InAppWebViewController.injectStyleFile

Injects a CSS file into the InAppWebView window.

inAppWebViewController.injectStyleFile(String urlFile);

int InAppWebViewController.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.

inAppWebViewController.addJavaScriptHandler(String handlerName, JavaScriptHandlerCallback callback);

bool InAppWebViewController.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.

inAppWebViewController.removeJavaScriptHandler(String handlerName, int index);

Future InAppWebViewController.takeScreenshot

Takes a screenshot (in PNG format) of the WebView's visible viewport and returns a Uint8List. Returns null if it wasn't be able to take it.

NOTE for iOS: available from iOS 11.0+.

inAppWebViewController.takeScreenshot();

Future InAppWebViewController.setOptions

Sets the InAppWebView options with the new options and evaluates them.

inAppWebViewController.setOptions(Map<String, dynamic> options);

Future> InAppWebViewController.getOptions

Gets the current InAppWebView options. Returns null if the options are not setted yet.

inAppWebViewController.getOptions();

Future InAppWebViewController.getCopyBackForwardList

Gets the WebHistory for this WebView. This contains the back/forward list for use in querying each item in the history stack. This contains only a snapshot of the current state. Multiple calls to this method may return different objects. The object returned from this method will not be updated to reflect any new state.

inAppWebViewController.getCopyBackForwardList();

InAppBrowser class

In-App Browser using native WebView.

inAppBrowser.webViewController can be used to access the InAppWebView API.

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 onBrowserCreated() async {
    print("\n\nBrowser Ready!\n\n");
  }
  
  @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.webViewController.injectScriptCode("window.flutter_inappbrowser.callHandler('handlerNameTest', 1, 5,'string', {'key': 5}, [4,6,8]);");

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

    // console messages
    await this.webViewController.injectScriptCode("console.log({'testObject': 5});"); // the message will be: [object Object]
    await this.webViewController.injectScriptCode("console.log('testObjectStringify', JSON.stringify({'testObject': 5}));"); // the message will be: testObjectStringify {"testObject": 5}
    await this.webViewController.injectScriptCode("console.error('testError', false);"); // the message will be: testError false

    // add jquery library and custom javascript
    await this.webViewController.injectScriptFile("https://code.jquery.com/jquery-3.3.1.min.js");
    this.webViewController.injectScriptCode("""
      \$( "body" ).html( "Next Step..." )
    """);

    // add custom css
    this.webViewController.injectStyleCode("""
    body {
      background-color: #3c3c3c !important;
    }
    """);
    this.webViewController.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.webViewController.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.webViewController.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: () async {
            await inAppBrowser.open(url: "https://flutter.io/", options: {
              "useShouldOverrideUrlLoading": true,
              "useOnLoadResource": true
            });
          },
              child: Text("Open InAppBrowser")
          ),
        ),
      ),
    );
  }
}

Screenshots:

  • iOS:

ios

  • Android:

android

Future InAppBrowser.open

Opens an url in a new InAppBrowser instance.

  • 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.

  • 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 toolbar 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 toolbar 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
});
inAppBrowser.open({String url = "about:blank", Map<String, String> headers = const {}, Map<String, dynamic> options = const {}});

Future InAppBrowser.openFile

Opens the given assetFilePath file in a new InAppBrowser instance. The other arguments are the same of InAppBrowser.open().

To be able to load your local files (assets, js, css, etc.), you need to add them in the assets section of the pubspec.yaml file, otherwise they cannot be found!

Example of a pubspec.yaml file:

...

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - assets/index.html
    - assets/css/
    - assets/images/

...

Example of a main.dart file:

...
inAppBrowser.openFile("assets/index.html");
...
inAppBrowser.openFile(String assetFilePath, {Map<String, String> headers = const {}, Map<String, dynamic> options = const {}});

static Future InAppBrowser.openData

Opens a new InAppBrowser instance with data as a content, using baseUrl as the base URL for it. The mimeType parameter specifies the format of the data. The encoding parameter specifies the encoding of the data.

InAppBrowser.openData(String data, {String mimeType = "text/html", String encoding = "utf8", String baseUrl = "about:blank", Map<String, dynamic> options = const {}});

static Future InAppBrowser.openWithSystemBrowser

This is a static method that opens an url in the system browser. You wont be able to use the InAppBrowser methods here!

InAppBrowser.openWithSystemBrowser(String url);

Future InAppBrowser.show

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

inAppBrowser.show();

Future InAppBrowser.hide

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

inAppBrowser.hide();

Future InAppBrowser.close

Closes the InAppBrowser window.

inAppBrowser.close();

Future InAppBrowser.isHidden

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

inAppBrowser.isHidden();

Future InAppBrowser.setOptions

Sets the InAppBrowser options and the InAppWebView options with the new options and evaluates them.

inAppBrowser.setOptions(Map<String, dynamic> options);

Future> InAppBrowser.getOptions

Gets the current InAppBrowser options and the current InAppWebView options merged together. Returns null if the options are not setted yet.

inAppBrowser.getOptions();

bool InAppBrowser.isOpened

Returns true if the InAppBrowser instance is opened, otherwise false.

inAppBrowser.isOpened();

Events

Event onBrowserCreated fires when the InAppBrowser is created.

  @override
  void onBrowserCreated() {

  }

Event onLoadStart fires when the InAppBrowser starts to load an url.

  @override
  void onLoadStart(String url) {

  }

Event onLoadStop fires when the InAppBrowser finishes loading an url.

  @override
  void onLoadStop(String url) {

  }

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

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

  }

Event onProgressChanged fires when the current progress (range 0-100) of loading a page is changed.

  @override
  void onProgressChanged(int progress) {

  }

Event onExit fires when the InAppBrowser window is closed.

  @override
  void onExit() {

  }

Event onConsoleMessage fires when the InAppBrowser webview receives a ConsoleMessage.

  @override
  void onConsoleMessage(ConsoleMessage consoleMessage) {

  }

shouldOverrideUrlLoading: 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 onLoadResource 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) {

  }

Event onScrollChanged fires when the InAppBrowser webview scrolls. x represents the current horizontal scroll origin in pixels. y represents the current vertical scroll origin in pixels.

  @override
  void onScrollChanged(int x, int y) {
                                                                         
  }

ChromeSafariBrowser class

Chrome Custom Tabs on Android / SFSafariViewController on iOS.

You can initialize the ChromeSafariBrowser instance with an InAppBrowser fallback instance.

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

Screenshots:

  • iOS:

ios

  • Android:

android

Future ChromeSafariBrowser.open

Opens an url in a new ChromeSafariBrowser instance.

  • 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 onOpened fires when the ChromeSafariBrowser is opened.

  @override
  void onOpened() {

  }

Event onLoaded fires when the ChromeSafariBrowser is loaded.

  @override
  void onLoaded() {

  }

Event onClosed fires when the ChromeSafariBrowser is closed.

  @override
  void onClosed() {

  }

InAppLocalhostServer class

This class allows you to create a simple server on http://localhost:[port]/ in order to be able to load your assets file on a server. The default port value is 8080.

Example:

// ...

InAppLocalhostServer localhostServer = new InAppLocalhostServer();

Future main() async {
  await localhostServer.start();
  runApp(new MyApp());
}

// ...

  @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: () async {
              await inAppBrowser.open(
                  url: "http://localhost:8080/assets/index.html",
                  options: {});
            },
            child: Text("Open InAppBrowser")
          ),
        ),
      ),
    );
  }

// ...

Future InAppLocalhostServer.start

Starts a server on http://localhost:[port]/.

NOTE for iOS: For the iOS Platform, you need to add the NSAllowsLocalNetworking key with true in the Info.plist file (See ATS Configuration Basics):

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

The NSAllowsLocalNetworking key is available since iOS 10.

localhostServer.start();

Future InAppLocalhostServer.close

Closes the server.

localhostServer.close();

CookieManager class

Manages the cookies used by WebView instances.

NOTE for iOS: available from iOS 11.0+.

Example:

var url = "https://flutter.io/";
await CookieManager.setCookie(url, "myCookie", "cookieValue", domain: "flutter.io", expiresDate: 1540838864611);
print(await CookieManager.getCookies(url));
print(await CookieManager.getCookie(url, "myCookie"));
await CookieManager.deleteCookie(url, "myCookie");
await CookieManager.deleteCookie(url, "_gid", domain: ".googleblog.com");
await CookieManager.deleteCookies(url);
await CookieManager.deleteAllCookies();

static Future CookieManager.setCookie

Sets a cookie for the given url. Any existing cookie with the same host, path and name will be replaced with the new cookie. The cookie being set will be ignored if it is expired.

The default value of path is "/". If domain is null, its default value will be the domain name of url.

CookieManager.setCookie(String url, String name, String value, { String domain, String path = "/", int expiresDate, int maxAge, bool isSecure });

static Future CookieManager.getCookies

Gets all the cookies for the given url.

CookieManager.getCookies(String url);

static Future CookieManager.getCookie

Gets a cookie by its name for the given url.

CookieManager.getCookie(String url, String name);

static Future CookieManager.deleteCookie

Removes a cookie by its name for the given url, domain and path.

The default value of path is "/". If domain is null or empty, its default value will be the domain name of url.

CookieManager.deleteCookie(String url, String name, {String domain = "", String path = "/"});

static Future CookieManager.deleteCookies

Removes all cookies for the given url, domain and path.

The default value of path is "/". If domain is null or empty, its default value will be the domain name of url.

CookieManager.deleteCookies(String url, {String domain = "", String path = "/"});

static Future CookieManager.deleteAllCookies

Removes all cookies.

CookieManager.deleteAllCookies();

0.5.51

  • updated pubspec.yaml
  • updated README.md

0.5.5

  • added getUrl method for the InAppWebViewController class
  • added getTitle method for the InAppWebViewController class
  • added getProgress method for the InAppWebViewController class
  • added getFavicon method for the InAppWebViewController class
  • added onScrollChanged event for the InAppWebViewController and InAppBrowser class
  • added onBrowserCreated event for the InAppBrowser class
  • added openData method for the InAppBrowser class
  • added initialData property for the InAppWebView widget

0.5.4

  • added WebHistory and WebHistoryItem class
  • added getCopyBackForwardList, goBackOrForward, canGoBackOrForward and goTo methods for the InAppWebViewController class

0.5.3

  • added CookieManager class

0.5.2

  • fixed some missing result.success() on Android and iOS
  • added postUrl() method for the InAppWebViewController class
  • added loadData() method for the InAppWebViewController class

0.5.1

  • updated README.md

0.5.0

  • added initial support for Inline WebViews using the InAppWebView widget
  • added InAppBrowser.openFile() method
  • added InAppBrowser.onProgressChanged() event
  • moved InAppBrowser WebView related functions on the InAppWebViewController class
  • added InAppLocalhostServer class
  • added InAppWebView.canGoBack() and InAppWebView.canGoForward() methods
  • removed openWithSystemBrowser and isLocalFile option. Now use the corresponding method
  • code refactoring

0.4.1

  • added InAppBrowser.takeScreenshot()
  • added InAppBrowser.setOptions()
  • added InAppBrowser.getOptions()

0.4.0

  • removed target parameter to InAppBrowser.open() method. To open the url on the system browser, use the openWithSystemBrowser: true option
  • fixes for the _ChannelManager private class
  • fixed EXC_BAD_INSTRUCTION onLoadStart in Swift
  • added openWithSystemBrowser and isLocalFile options
  • added InAppBrowser.openWithSystemBrowser method
  • added InAppBrowser.openOnLocalhost method
  • added InAppBrowser.loadFile method
  • added InAppBrowser.isOpened method

0.3.2

  • fixed WebView.storyboard path for iOS

0.3.1

  • fixed README.md example

0.3.0

  • fixed WebView.storyboard to deployment target 8.0
  • added InAppBrowser.onLoadResource() method. The event fires when the InAppBrowser webview loads a resource
  • added InAppBrowser.addJavaScriptHandler() and InAppBrowser.removeJavaScriptHandler() methods to add/remove javascript message handlers
  • removed keyboardDisplayRequiresUserAction from iOS available options
  • now the url parameter of InAppBrowser.open() is optional. The default value is about:blank

0.2.1

  • added InAppBrowser.onConsoleMessage() method to manage console messages
  • fixed InAppBrowser.injectScriptCode() method when there is not a return value

0.2.0

  • added support of Chrome CustomTabs for Android
  • added support of SFSafariViewController for iOS
  • added the ability to create multiple instances of browsers

0.1.1

  • updated/added new methods
  • updated UI of android/iOS in-app browser
  • code cleanup
  • added new options when opening the in-app browser

0.0.1

Initial release.

example/README.md

flutter_inappbrowser_example

Demonstrates how to use the flutter_inappbrowser plugin.

Getting Started

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

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_inappbrowser: ^0.5.51

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';
  
Version Uploaded Documentation Archive
0.5.51 Nov 7, 2018 Go to the documentation of flutter_inappbrowser 0.5.51 Download flutter_inappbrowser 0.5.51 archive
0.5.5 Nov 7, 2018 Go to the documentation of flutter_inappbrowser 0.5.5 Download flutter_inappbrowser 0.5.5 archive
0.5.4 Oct 30, 2018 Go to the documentation of flutter_inappbrowser 0.5.4 Download flutter_inappbrowser 0.5.4 archive
0.5.3 Oct 27, 2018 Go to the documentation of flutter_inappbrowser 0.5.3 Download flutter_inappbrowser 0.5.3 archive
0.5.2 Oct 22, 2018 Go to the documentation of flutter_inappbrowser 0.5.2 Download flutter_inappbrowser 0.5.2 archive
0.5.1 Oct 22, 2018 Go to the documentation of flutter_inappbrowser 0.5.1 Download flutter_inappbrowser 0.5.1 archive
0.5.0 Oct 21, 2018 Go to the documentation of flutter_inappbrowser 0.5.0 Download flutter_inappbrowser 0.5.0 archive
0.4.1 Oct 17, 2018 Go to the documentation of flutter_inappbrowser 0.4.1 Download flutter_inappbrowser 0.4.1 archive
0.4.0 Oct 15, 2018 Go to the documentation of flutter_inappbrowser 0.4.0 Download flutter_inappbrowser 0.4.0 archive
0.3.2 Oct 14, 2018 Go to the documentation of flutter_inappbrowser 0.3.2 Download flutter_inappbrowser 0.3.2 archive

All 17 versions...

Popularity:
Describes how popular the package is relative to other packages. [more]
85
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

We analyzed this package on Nov 7, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0-dev.7.1.flutter-b99bcfd309
  • pana: 0.12.5
  • Flutter: 0.10.1

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/flutter_inappbrowser.dart. (-0.50 points)

Analysis of lib/flutter_inappbrowser.dart reported 1 hint:

line 735 col 7: The value of the field '_id' isn't used.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
flutter 0.0.0
mime ^0.9.6+2 0.9.6+2
uuid ^1.0.3 1.0.3
Transitive dependencies
charcode 1.1.2
collection 1.14.11
convert 2.0.2
crypto 2.0.6
meta 1.1.6
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8