iosWebViewFix/README.md

616 lines
24 KiB
Markdown
Raw Normal View History

2018-10-13 20:44:08 +00:00
# Flutter InAppBrowser Plugin [![Share on Twitter](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Flutter%20InAppBrowser%20plugin!&url=https://github.com/pichillilorenzo/flutter_inappbrowser&hashtags=flutter,flutterio,dart,dartlang,webview) [![Share on Facebook](https://img.shields.io/badge/share-facebook-blue.svg?longCache=true&style=flat&colorB=%234267b2)](https://www.facebook.com/sharer/sharer.php?u=https%3A//github.com/pichillilorenzo/flutter_inappbrowser)
2018-09-14 00:21:51 +00:00
[![Pub](https://img.shields.io/pub/v/flutter_inappbrowser.svg)](https://pub.dartlang.org/packages/flutter_inappbrowser)
2018-10-13 20:44:08 +00:00
[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](/LICENSE.txt)
[![Donate to this project using Paypal](https://img.shields.io/badge/paypal-donate-yellow.svg)](https://www.paypal.me/LorenzoPichilli)
[![Donate to this project using Patreon](https://img.shields.io/badge/patreon-donate-yellow.svg)](https://www.patreon.com/bePatron?u=9269604)
2018-09-14 00:21:51 +00:00
A Flutter plugin that allows you to open an in-app browser window.
2018-09-23 23:53:22 +00:00
This plugin is inspired by the popular [cordova-plugin-inappbrowser](https://github.com/apache/cordova-plugin-inappbrowser)!
2018-09-14 00:21:51 +00:00
## Getting Started
For help getting started with Flutter, view our online
[documentation](https://flutter.io/).
For help on editing plugin code, view the [documentation](https://flutter.io/developing-packages/#edit-plugin-package).
## Installation
First, add `flutter_inappbrowser` as a [dependency in your pubspec.yaml file](https://flutter.io/using-packages/).
## Usage
2018-10-05 11:18:28 +00:00
Classes:
- [InAppBrowser](#inappbrowser): Native WebView.
- [ChromeSafariBrowser](#chromesafaribrowser): [Chrome Custom Tabs](https://developer.android.com/reference/android/support/customtabs/package-summary) on Android / [SFSafariViewController](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller) on iOS.
Screenshots [here](#screenshots).
### `InAppBrowser` class
2018-09-14 00:21:51 +00:00
Create a Class that extends the `InAppBrowser` Class in order to override the callbacks to manage the browser events.
Example:
```dart
2018-09-14 00:41:43 +00:00
import 'package:flutter/material.dart';
2018-09-14 00:21:51 +00:00
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';
class MyInAppBrowser extends InAppBrowser {
2018-09-14 00:41:43 +00:00
2018-09-14 00:21:51 +00:00
@override
void onLoadStart(String url) {
print("\n\nStarted $url\n\n");
}
2018-09-14 00:41:43 +00:00
2018-09-14 00:21:51 +00:00
@override
2018-09-24 00:07:38 +00:00
Future onLoadStop(String url) async {
2018-09-14 00:21:51 +00:00
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]);");
2018-09-23 23:53:22 +00:00
// 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
2018-09-23 23:53:22 +00:00
// 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");
2018-09-14 00:21:51 +00:00
}
2018-09-14 00:41:43 +00:00
2018-09-14 00:21:51 +00:00
@override
void onLoadError(String url, int code, String message) {
2018-09-14 00:21:51 +00:00
print("\n\nCan't load $url.. Error: $message\n\n");
}
2018-09-14 00:41:43 +00:00
2018-09-14 00:21:51 +00:00
@override
void onExit() {
print("\n\nBrowser closed!\n\n");
}
2018-09-23 23:53:22 +00:00
@override
void shouldOverrideUrlLoading(String url) {
print("\n\n override $url\n\n");
this.loadUrl(url);
}
2018-09-14 00:41:43 +00:00
@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}
""");
}
2018-09-14 00:21:51 +00:00
}
MyInAppBrowser inAppBrowser = new MyInAppBrowser();
2018-09-14 00:41:43 +00:00
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
2018-10-13 20:14:53 +00:00
int indexTest = inAppBrowser.addJavaScriptHandler("handlerNameTest", (arguments) async {
print("handlerNameTest arguments");
print(arguments); // it prints: [1, 5, string, {key: 5}, [4, 6, 8]]
});
2018-09-14 00:41:43 +00:00
}
@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: () {
2018-10-13 19:53:02 +00:00
inAppBrowser.open(url: "https://flutter.io/", options: {
"useShouldOverrideUrlLoading": true,
"useOnLoadResource": true
2018-09-23 23:53:22 +00:00
});
2018-09-14 00:41:43 +00:00
},
child: Text("Open InAppBrowser")
),
),
),
);
}
}
2018-09-14 00:21:51 +00:00
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.open
2018-09-14 00:21:51 +00:00
Opens a URL in a new InAppBrowser instance or the system browser.
2018-09-14 00:21:51 +00:00
```dart
inAppBrowser.open({String url = "about:blank", Map<String, String> headers = const {}, String target = "_self", Map<String, dynamic> options = const {}});
2018-09-14 00:21:51 +00:00
```
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`.
2018-09-14 00:21:51 +00:00
2018-09-23 23:53:22 +00:00
- `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`.
2018-09-14 00:21:51 +00:00
- `_self`: Opens in the `InAppBrowser`.
- `_blank`: Opens in the `InAppBrowser`.
- `_system`: Opens in the system's web browser.
2018-09-23 23:53:22 +00:00
- `options`: Options for the `InAppBrowser`.
2018-09-14 00:21:51 +00:00
All platforms support:
2018-09-23 23:53:22 +00:00
- __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`.
2018-09-23 23:53:22 +00:00
- __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`.
2018-09-14 00:21:51 +00:00
**Android** supports these additional options:
2018-09-23 23:53:22 +00:00
- __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`.
2018-09-14 00:21:51 +00:00
**iOS** supports these additional options:
2018-09-23 23:53:22 +00:00
- __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](https://developer.apple.com/documentation/uikit/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](https://developer.apple.com/documentation/uikit/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`.
2018-09-14 00:21:51 +00:00
Example:
```dart
2018-09-23 23:53:22 +00:00
inAppBrowser.open('https://flutter.io/', options: {
"useShouldOverrideUrlLoading": true,
"useOnLoadResource": true,
2018-09-23 23:53:22 +00:00
"clearCache": true,
"disallowOverScroll": true,
"domStorageEnabled": true,
"supportZoom": false,
"toolbarBottomTranslucent": false,
"allowsLinkPreview": false
});
2018-09-14 00:21:51 +00:00
```
2018-10-05 11:18:28 +00:00
#### Events
2018-09-14 00:21:51 +00:00
Event fires when the `InAppBrowser` starts to load an `url`.
```dart
@override
void onLoadStart(String url) {
2018-09-23 23:53:22 +00:00
2018-09-14 00:21:51 +00:00
}
```
Event fires when the `InAppBrowser` finishes loading an `url`.
```dart
@override
void onLoadStop(String url) {
2018-09-23 23:53:22 +00:00
2018-09-14 00:21:51 +00:00
}
```
Event fires when the `InAppBrowser` encounters an error loading an `url`.
```dart
@override
void onLoadError(String url, String code, String message) {
2018-09-23 23:53:22 +00:00
2018-09-14 00:21:51 +00:00
}
```
Event fires when the `InAppBrowser` window is closed.
```dart
@override
void onExit() {
2018-09-23 23:53:22 +00:00
2018-09-14 00:21:51 +00:00
}
```
Event fires when the `InAppBrowser` webview receives a `ConsoleMessage`.
```dart
@override
void onConsoleMessage(ConsoleMessage consoleMessage) {
}
```
2018-09-23 23:53:22 +00:00
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`.
2018-09-23 23:53:22 +00:00
```dart
@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.
```dart
@override
void onLoadResource(WebResourceResponse response, WebResourceRequest request) {
}
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.loadUrl
2018-09-23 23:53:22 +00:00
Loads the given `url` with optional `headers` specified as a map from name to value.
```dart
inAppBrowser.loadUrl(String url, {Map<String, String> headers = const {}});
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.show
2018-09-14 00:21:51 +00:00
Displays an `InAppBrowser` window that was opened hidden. Calling this has no effect if the `InAppBrowser` was already visible.
```dart
inAppBrowser.show();
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.hide
2018-09-14 00:21:51 +00:00
Hides the `InAppBrowser` window. Calling this has no effect if the `InAppBrowser` was already hidden.
```dart
inAppBrowser.hide();
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.close
2018-09-14 00:21:51 +00:00
2018-09-23 23:53:22 +00:00
Closes the `InAppBrowser` window.
2018-09-14 00:21:51 +00:00
```dart
inAppBrowser.close();
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.reload
2018-09-14 00:21:51 +00:00
2018-09-23 23:53:22 +00:00
Reloads the `InAppBrowser` window.
2018-09-14 00:21:51 +00:00
```dart
2018-09-23 23:53:22 +00:00
inAppBrowser.reload();
2018-09-14 00:21:51 +00:00
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.goBack
2018-09-23 23:53:22 +00:00
Goes back in the history of the `InAppBrowser` window.
```dart
inAppBrowser.goBack();
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.goForward
2018-09-23 23:53:22 +00:00
Goes forward in the history of the `InAppBrowser` window.
```dart
inAppBrowser.goForward();
```
2018-10-05 11:18:28 +00:00
#### Future\<bool\> InAppBrowser.isLoading
2018-09-23 23:53:22 +00:00
Check if the Web View of the `InAppBrowser` instance is in a loading state.
```dart
inAppBrowser.isLoading();
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.stopLoading
2018-09-23 23:53:22 +00:00
Stops the Web View of the `InAppBrowser` instance from loading.
```dart
inAppBrowser.stopLoading();
```
2018-10-05 11:18:28 +00:00
#### Future\<bool\> InAppBrowser.isHidden
2018-09-23 23:53:22 +00:00
Check if the Web View of the `InAppBrowser` instance is hidden.
```dart
inAppBrowser.isHidden();
```
2018-10-05 11:18:28 +00:00
#### Future\<String\> InAppBrowser.injectScriptCode
2018-09-23 23:53:22 +00:00
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`)
```dart
inAppBrowser.injectScriptCode(String source);
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.injectScriptFile
2018-09-14 00:21:51 +00:00
Injects a JavaScript file into the `InAppBrowser` window. (Only available when the target is set to `_blank` or to `_self`)
```dart
2018-09-23 23:53:22 +00:00
inAppBrowser.injectScriptFile(String urlFile);
2018-09-14 00:21:51 +00:00
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.injectStyleCode
2018-09-14 00:21:51 +00:00
Injects CSS into the `InAppBrowser` window. (Only available when the target is set to `_blank` or to `_self`)
```dart
2018-09-23 23:53:22 +00:00
inAppBrowser.injectStyleCode(String source);
2018-09-14 00:21:51 +00:00
```
2018-10-05 11:18:28 +00:00
#### Future\<void\> InAppBrowser.injectStyleFile
2018-09-14 00:21:51 +00:00
Injects a CSS file into the `InAppBrowser` window. (Only available when the target is set to `_blank` or to `_self`)
```dart
2018-09-23 23:53:22 +00:00
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](https://developer.android.com/reference/android/webkit/WebView#addJavascriptInterface(java.lang.Object,%20java.lang.String)).
The iOS implementation uses [addScriptMessageHandler](https://developer.apple.com/documentation/webkit/wkusercontentcontroller/1537172-addscriptmessagehandler?language=objc)
The JavaScript function that can be used to call the handler is `window.flutter_inappbrowser.callHandler(handlerName <String>, ...args);`, where `args` are [rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).
The `args` will be stringified automatically using `JSON.stringify(args)` method and then they will be decoded on the Dart side.
```dart
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`.
```dart
inAppBrowser.removeJavaScriptHandler(String handlerName, int index);
```
2018-09-14 00:21:51 +00:00
2018-10-05 11:18:28 +00:00
### `ChromeSafariBrowser` class
Create a Class that extends the `ChromeSafariBrowser` Class in order to override the callbacks to manage the browser events. Example:
```dart
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](https://developer.apple.com/documentation/safariservices/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](https://developer.apple.com/documentation/uikit/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](https://developer.apple.com/documentation/uikit/uimodaltransitionStyle) for all the available styles.
Example:
```dart
chromeSafariBrowser.open("https://flutter.io/", options: {
"addShareButton": false,
"toolbarBackgroundColor": "#000000",
"dismissButtonStyle": 1,
"preferredBarTintColor": "#000000",
});
```
#### Events
Event fires when the `ChromeSafariBrowser` is opened.
```dart
@override
void onOpened() {
}
```
Event fires when the `ChromeSafariBrowser` is loaded.
```dart
@override
void onLoaded() {
}
```
Event fires when the `ChromeSafariBrowser` is closed.
```dart
@override
void onClosed() {
}
```
2018-09-14 00:41:43 +00:00
## Screenshots:
2018-10-05 11:18:28 +00:00
#### InAppBrowser
2018-09-14 00:41:43 +00:00
iOS:
2018-09-14 00:42:46 +00:00
2018-09-23 23:53:22 +00:00
![ios](https://user-images.githubusercontent.com/5956938/45934084-2a935400-bf99-11e8-9d71-9e1758b5b8c6.gif)
2018-09-14 00:41:43 +00:00
Android:
2018-09-14 00:42:46 +00:00
2018-10-05 11:18:28 +00:00
![android](https://user-images.githubusercontent.com/5956938/45934080-26ffcd00-bf99-11e8-8136-d39a81bd83e7.gif)
#### ChromeSafariBrowser
iOS:
![ios](https://user-images.githubusercontent.com/5956938/46532148-0c362e00-c8a0-11e8-9a0e-343e049dcf35.gif)
Android:
![android](https://user-images.githubusercontent.com/5956938/46532149-0c362e00-c8a0-11e8-8134-9af18f38a746.gif)