# 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) [![Pub](https://img.shields.io/pub/v/flutter_inappbrowser.svg)](https://pub.dartlang.org/packages/flutter_inappbrowser) [![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square)](https://stackoverflow.com/questions/tagged/flutter?sort=votes) [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](/LICENSE) [![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) 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](https://github.com/apache/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)](https://github.com/flutter/flutter/issues/13422#issuecomment-392133780)), 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](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 Classes: - [InAppWebView](#inappwebview-class): Flutter Widget for adding an **inline native WebView** integrated in the flutter widget tree. [**Available only for Android** ([AndroidView](https://docs.flutter.io/flutter/widgets/AndroidView-class.html)) at this moment. For iOS, it will be available as soon as the Flutter team will release the corresponding dart class.]. - [InAppBrowser](#inappbrowser-class): In-App Browser using native WebView. - [ChromeSafariBrowser](#chromesafaribrowser-class): In-App Browser using [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. - [InAppLocalhostServer](#inapplocalhostserver-class): This class allows you to create a simple server on `http://localhost:[port]/`. The default `port` value is `8080`. - [CookieManager](#cookiemanager-class): Manages the cookies used by WebView instances. **NOTE for iOS**: available from iOS 11.0+. See the online [docs](https://pub.dartlang.org/documentation/flutter_inappbrowser/latest/) to get the full documentation. ### `InAppWebView` class Flutter Widget for adding an **inline native WebView** integrated in the flutter widget tree. [AndroidView](https://docs.flutter.io/flutter/widgets/AndroidView-class.html) 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](https://docs.flutter.io/flutter/widgets/AndroidView-class.html)) 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: ```dart 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 { 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: [ 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: [ 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](https://user-images.githubusercontent.com/5956938/47271038-7aebda80-d574-11e8-98fd-41e6bbc9fe2d.gif) #### 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 `