What is flutter_inappwebview ? It’s a Flutter plugin that allows you to incorporate WebView widgets into your Flutter app, to use headless WebViews, or to use In-App browsers.

So, what’s the difference between webview_flutter (Official flutter plugin) and flutter_webview_plugin ?

Compared to all other WebView plugins, it is feature-rich: a lot of events, methods, and options to control WebViews. Furthermore, they do not have good documentation about their API or, at least, it is not complete. Instead, every feature of flutter_inappwebview is almost all documented (just check the API Reference on pub.dev).

In this article, I’m going to present the main classes and some examples of the InAppWebView widget that people were asking about on the official flutter_inappwebview repository (issue section) and on StackOverflow.

Main Classes Overview

This is a list of the main classes that the plugin offers:

• InAppWebView: Flutter Widget for adding an inline native WebView integrated into the flutter widget tree.
• ContextMenu: This class represents the WebView context menu.
• HeadlessInAppWebView: Class that represents a WebView in headless mode. It can be used to run a WebView in background without attaching an InAppWebView to the widget tree.
• 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: This class implements a singleton object (shared instance) which manages the cookies used by WebView instances.
• HttpAuthCredentialDatabase: This class implements a singleton object (shared instance) that manages the shared HTTP auth credentials cache.
• WebStorageManager: This class implements a singleton object (shared instance) which manages the web storage used by WebView instances.

In this article, I’m going to show in particular the InAppWebView widget, that is the most used/requested one.

InAppWebView is a Widget like any other!

Adding the InAppWebView widget into your app is very simple. It’s just a widget like any other Flutter widget: InAppWebView(initialUrl: 'https://github.com/flutter').

NOTE: To use it on iOS, you need to opt-in for the embedded views preview by adding a boolean property to the app’s Info.plist file, with the key io.flutter.embedded_views_preview and the value YES.

This widget has a set of initial attributes that you can use to initialize the WebView:

• initialUrl: Initial URL that will be loaded;
• initialOptions: Initial WebView options that will be used;
• gestureRecognizers: specifies which gestures should be consumed by the WebView;
• initialData: Initial InAppWebViewInitialData that will be loaded, such as an HTML string;
• initialFile: Initial asset file that will be loaded (check the “Load a file inside assets folder” Section);
• initialHeaders: Initial headers that will be used;
• contextMenu: Context menu which contains custom menu items.

The list of all available WebView options is quite long, for example, you can enable/disable JavaScript using the javascriptEnabled option or enable/disable cache using the cacheEnabled option. The full list of all options is available here.

#flutter #developer