WebView All #

A WebView component that supports all Flutter platforms.

Usage #

You can now display a WebView in the following way:

1. Instantiate a WebViewController:

controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setNavigationDelegate(
    NavigationDelegate(
      onProgress: (int progress) {
        // Update the loading progress bar
      },
      onPageStarted: (String url) {},
      onPageFinished: (String url) {},
      onHttpError: (HttpResponseError error) {},
      onWebResourceError: (WebResourceError error) {},
      onNavigationRequest: (NavigationRequest request) {
        if (request.url.startsWith('https://www.bilibili.com')) {
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },
    ),
  )
  ..loadRequest(Uri.parse('https://flutter.dev'));

2. Pass controller to WebViewWidget:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Flutter Simple Example')),
    body: WebViewWidget(controller: controller),
  );
}

For more details, please refer to the Dart documentation for WebViewController and WebViewWidget.

Platform Features #

Many classes provide subclasses, or expose the underlying platform implementation, so that you can access platform-specific capabilities.

If you want to access platform features, first add the corresponding platform implementation package to your app or package:

• Android: webview_flutter_android
• iOS/macOS: webview_flutter_wkwebview

Then, import the corresponding platform implementation package in your app or package:

// Import Android platform features.
import 'package:webview_flutter_android/webview_flutter_android.dart';
// Import iOS/macOS platform features.
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

After that, you can access additional capabilities through the platform implementation.
[WebViewController], [WebViewWidget], [NavigationDelegate], and [WebViewCookieManager] all delegate their functionality to the implementation provided by the current platform. Below are two common ways to access them, with examples following.

1. Pass the creation params class provided by the platform implementation to the fromPlatformCreationParams constructor, such as WebViewController.fromPlatformCreationParams, WebViewWidget.fromPlatformCreationParams, and so on.
2. Call methods provided by the platform implementation through the platform field on the class, such as WebViewController.platform, WebViewWidget.platform, and so on.

The following example shows how to set additional parameters for iOS/macOS and Android on WebViewController.

late final PlatformWebViewControllerCreationParams params;
if (WebViewPlatform.instance is WebKitWebViewPlatform) {
  params = WebKitWebViewControllerCreationParams(
    allowsInlineMediaPlayback: true,
    mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
  );
} else {
  params = const PlatformWebViewControllerCreationParams();
}

final controller = WebViewController.fromPlatformCreationParams(params);

if (controller.platform is AndroidWebViewController) {
  AndroidWebViewController.enableDebugging(true);
  (controller.platform as AndroidWebViewController)
      .setMediaPlaybackRequiresUserGesture(false);
}

For more information about Android platform features, see: https://pub.dev/documentation/webview_flutter_android/latest/webview_flutter_android/webview_flutter_android-library.html

For more information about iOS/macOS platform features, see: https://pub.dev/documentation/webview_flutter_wkwebview/latest/webview_flutter_wkwebview/webview_flutter_wkwebview-library.html

Enable Material Components for Android #

If you want users to use Material Components when interacting with input controls in WebView, please follow the steps in Enable Material Components.

Set Custom Request Headers for POST Requests #

Currently, when making POST requests through WebViewController.loadRequest on Android, setting custom request headers is not yet supported. If you need this capability, one workaround is to make the request manually and then load the response content through loadHtmlString.

Known Limitations #

• Some APIs are missing on the macOS platform.
• Only a small subset of APIs is implemented on the Web platform.