允许您添加内联 WebView 或打开应用内浏览器窗口

Flutter InAppBrowser 插件

一个 Flutter 插件，允许您添加内联 WebView 或打开应用内浏览器窗口。

要求

• Dart sdk: ">=2.0.0-dev.68.0 <3.0.0"
• Flutter: ">=1.9.1+hotfix.5 <2.0.0"
• Android: minSdkVersion 17
• iOS: --ios-language swift

Android 注意事项

在构建过程中，如果 Android 构建失败并提示 Error: uses-sdk:minSdkVersion 16 cannot be smaller than version 17 declared in library，这意味着您需要将 build.gradle 文件的 minSdkVersion 更新为至少 17。

由于 Flutter AndroidX 兼容性，不支持 AndroidX 的最新版本是 0.6.0。

iOS 重要提示

如果您要创建一个全新的应用，您需要使用 flutter create -i swift 来创建 Flutter 应用（请参阅 flutter/flutter#13422 (comment)），否则您将收到此消息。

=== 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, 5.0. This setting can be set in the build settings editor.

如果问题仍然存在，请尝试像这样编辑 iOS Podfile（请参阅 #15）。

target 'Runner' do
  use_frameworks!  # required by simple_permission
  ...
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '5.0'  # required by simple_permission
      config.build_settings['ENABLE_BITCODE'] = 'NO'
    end
  end
end

相反，如果您已经有一个非 Swift 项目，可以查看此问题以解决问题：将 Swift 插件添加到 Objective-C 项目中的摩擦。

入门

要开始使用 Flutter，请参阅我们的在线
文档.

有关编辑插件代码的帮助，请参阅 文档。

安装

首先，将 flutter_inappbrowser 添加为 pubspec.yaml 文件中的依赖项。

用法

类

• InAppWebView：Flutter Widget，用于将 **内联原生 WebView** 集成到 Flutter 控件树中。要在 iOS 上使用 InAppWebView 类，您需要通过向应用的 Info.plist 文件添加一个布尔属性，键为 io.flutter.embedded_views_preview，值为 YES 来选择加入嵌入式视图预览。
• InAppBrowser：使用原生 WebView 的应用内浏览器。
• ChromeSafariBrowser：使用 Android 上的 Chrome Custom Tabs / iOS 上的 SFSafariViewController 的应用内浏览器。
• InAppLocalhostServer：此类允许您创建一个简单的服务器 https://:[port]/。默认 port 值为 8080。
• CookieManager：此类实现一个单例对象（共享实例），用于管理 WebView 实例使用的 cookie。iOS 注意事项：iOS 11.0+ 可用。
• HttpAuthCredentialDatabase：此类实现一个单例对象（共享实例），用于管理共享的 HTTP 身份验证凭据缓存。

API 参考

请参阅在线 API 参考 以获取完整文档。

加载 assets 文件夹中的文件

要加载本地文件（assets、js、css 等），您需要将它们添加到 pubspec.yaml 文件的 assets 部分，否则将无法找到它们！

pubspec.yaml 文件示例

...

# 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/

...

InAppWebView 类

Flutter Widget，用于将 **内联原生 WebView** 集成到 Flutter 控件树中。

该插件依赖于 Flutter 的机制（处于开发者预览阶段）来嵌入 Android 和 iOS 原生视图：AndroidView 和 UiKitView。
已知问题已在 Flutter 官方仓库 中标记为 platform-views 标签。
WebView 中的键盘支持也是实验性的。

要在 iOS 上使用 InAppWebView 类，您需要通过向应用的 Info.plist 文件添加一个布尔属性，键为 io.flutter.embedded_views_preview，值为 YES 来选择加入嵌入式视图预览。

使用 InAppWebViewController 来控制 WebView 实例。
示例

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('InAppWebView Example'),
        ),
        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}"),
            ),
            Container(
                padding: EdgeInsets.all(10.0),
                child: progress < 1.0
                    ? LinearProgressIndicator(value: progress)
                    : Container()),
            Expanded(
              child: Container(
                margin: const EdgeInsets.all(10.0),
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.blueAccent)),
                child: InAppWebView(
                  initialUrl: "https://flutterdart.cn/",
                  initialHeaders: {},
                  initialOptions: InAppWebViewWidgetOptions(
                    inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                    )
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
                    webView = controller;
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {
                    setState(() {
                      this.url = url;
                    });
                  },
                  onLoadStop: (InAppWebViewController controller, String url) async {
                    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();
                    }
                  },
                ),
              ],
            ),
        ])),
      ),
    );
  }
}

屏幕截图

• Android

• iOS

InAppWebViewController 方法

• getUrl：获取当前页面的 URL。
• getTitle：获取当前页面的标题。
• getProgress：获取当前页面的加载进度。进度值在 0 到 100 之间。
• getHtml：获取页面的内容 HTML。
• getFavicons：获取当前页面的所有图标列表。
• loadUrl({@required String url, Map<String, String> headers = const {}})：使用指定的名称到值映射的标头加载给定的 URL。
• postUrl({@required String url, @required Uint8List postData})：使用 POST 方法加载给定的 URL 和 postData 到此 WebView。
• loadData({@required String data, String mimeType = "text/html", String encoding = "utf8", String baseUrl = "about:blank"})：将给定的数据加载到此 WebView。
• loadFile({@required String assetFilePath, Map<String, String> headers = const {}})：使用指定的名称到值映射的标头加载给定的 assetFilePath。
• reload：重新加载 WebView。
• goBack：在 WebView 的历史记录中后退。
• canGoBack：返回一个布尔值，指示 WebView 是否可以后退。
• goForward：在 WebView 的历史记录中前进。
• canGoForward：返回一个布尔值，指示 WebView 是否可以前进。
• goBackOrForward({@required int steps})：跳转到当前项之前或之后的历史项。负值表示后退，正值表示前进。
• canGoBackOrForward({@required int steps})：返回一个布尔值，指示 WebView 是否可以按给定的步数后退或前进。负值表示后退，正值表示前进。
• goTo({@required WebHistoryItem historyItem})：从后退/前进 WebHistory.list 导航到 WebHistoryItem 并将其设置为当前项。
• isLoading：检查 WebView 实例是否处于加载状态。
• stopLoading：停止 WebView 加载。
• evaluateJavascript({@required String source})：在 WebView 中执行 JavaScript 代码，并返回执行结果。
• injectJavascriptFileFromUrl({@required String urlFile})：从定义的 URL 注入外部 JavaScript 文件到 WebView。
• injectJavascriptFileFromAsset({@required String assetFilePath})：从 Flutter assets 目录注入 JavaScript 文件到 WebView。
• injectCSSCode({@required String source})：注入 CSS 到 WebView。
• injectCSSFileFromUrl({@required String urlFile})：从定义的 URL 注入外部 CSS 文件到 WebView。
• injectCSSFileFromAsset({@required String assetFilePath})：从 Flutter assets 目录注入 CSS 文件到 WebView。
• addJavaScriptHandler({@required String handlerName, @required JavaScriptHandlerCallback callback})：添加一个 JavaScript 消息处理程序回调，监听来自 JavaScript 的、名为 handlerName 的消息。
• removeJavaScriptHandler({@required String handlerName})：移除先前使用 addJavaScriptHandler() 添加的、与 handlerName 关联的 JavaScript 消息处理程序。
• takeScreenshot：截取 WebView 可见视口的屏幕截图（PNG 格式），并返回 Uint8List。如果未能截取，则返回 null。
• setOptions({@required InAppWebViewWidgetOptions options})：使用新选项设置 WebView 选项并对其进行评估。
• getOptions：获取当前的 WebView 选项。如果选项尚未设置，则返回值为 null 的选项。
• getCopyBackForwardList：获取此 WebView 的 WebHistory。它包含用于查询历史堆栈中每个项的后退/前进列表。
• startSafeBrowsing：启动安全浏览初始化（仅在 Android 上可用）。
• setSafeBrowsingWhitelist({@required List<String> hosts})：设置免于安全浏览检查的主机列表（域名/IP 地址）。该列表对所有 WebView 全局生效（仅在 Android 上可用）。
• getSafeBrowsingPrivacyPolicyUrl：返回一个指向安全浏览报告隐私政策的 URL。此值永远不会为 null。
• clearCache：清除所有 WebView 的缓存。
• clearSslPreferences：清除 SSL 证书错误处理时存储的 SSL 首选项表（仅在 Android 上可用）。
• clearClientCertPreferences：清除客户端证书请求处理时存储的客户端证书首选项（仅在 Android 上可用）。
• findAllAsync({@required String find})：查找页面中所有出现的“find”并高亮显示它们。通知 onFindResultReceived 监听器。
• findNext({@required bool forward})：高亮显示并滚动到 findAllAsync() 找到的下一个匹配项。通知 onFindResultReceived 监听器。
• clearMatches：清除由 findAllAsync() 创建的突出显示文本匹配项。
• getTRexRunnerHtml：获取 Chromium 的 t-rex 运行器游戏的 HTML（带 JavaScript）。与 getTRexRunnerCss() 结合使用。
• getTRexRunnerCss：获取 Chromium 的 t-rex 运行器游戏的 CSS。与 getTRexRunnerHtml() 结合使用。
• scrollTo({@required int x, @required int y})：将 WebView 滚动到指定位置。
• scrollBy({@required int x, @required int y})：移动 WebView 的滚动位置。

关于 JavaScript 处理程序

Android 实现使用 addJavascriptInterface。
iOS 实现使用 addScriptMessageHandler

可用于调用处理程序的 JavaScript 函数是 window.flutter_inappbrowser.callHandler(handlerName <String>, ...args)，其中 args 是 rest 参数。
args 将使用 JSON.stringify(args) 方法自动字符串化，然后将在 Dart 端解码。

为了正确调用 window.flutter_inappbrowser.callHandler(handlerName <String>, ...args)，您需要等待并监听 JavaScript 事件 flutterInAppBrowserPlatformReady。
一旦平台（Android 或 iOS）准备好处理 callHandler 方法，就会分发此事件。

   window.addEventListener("flutterInAppBrowserPlatformReady", function(event) {
     console.log("ready");
   });

window.flutter_inappbrowser.callHandler 返回一个 JavaScript Promise
可用于获取 [JavaScriptHandlerCallback] 返回的 JSON 结果。
在这种情况下，只需返回您想要发送的数据，它将使用 dart:convert 库中的 [jsonEncode] 自动进行 JSON 编码。

因此，在 JavaScript 端，要获取来自 Dart 端的数据，您将使用

<script>
   window.addEventListener("flutterInAppBrowserPlatformReady", function(event) {
     window.flutter_inappbrowser.callHandler('handlerFoo').then(function(result) {
       console.log(result);
     });

     window.flutter_inappbrowser.callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}).then(function(result) {
       console.log(result);
     });
   });
</script>

相反，在 onLoadStop WebView 事件中，您可以直接使用 callHandler。

  // Inject JavaScript that will receive data back from Flutter
  inAppWebViewController.evaluateJavascript(source: """
    window.flutter_inappbrowser.callHandler('test', 'Text from Javascript').then(function(result) {
      console.log(result);
    });
  """);

InAppWebView 选项

InAppWebView 跨平台选项

• useShouldOverrideUrlLoading：设置为 true 以便能够监听 shouldOverrideUrlLoading 事件。默认为 false。
• useOnLoadResource：设置为 true 以便能够监听 onLoadResource 事件。默认为 false。
• useOnDownloadStart：设置为 true 以便能够监听 onDownloadStart 事件。默认为 false。
• useOnTargetBlank：设置为 true 以便能够监听 onTargetBlank 事件。默认为 false。
• clearCache：设置为 true 以在打开新窗口之前清除所有浏览器的缓存。默认为 false。
• userAgent：设置 WebView 的用户代理。
• applicationNameForUserAgent：追加到现有用户代理。设置 userAgent 会覆盖此项。
• javaScriptEnabled：设置为 true 以启用 JavaScript。默认为 true。
• debuggingEnabled：启用此应用程序中任何 WebView 中加载的 Web 内容（HTML / CSS / JavaScript）的调试。
• javaScriptCanOpenWindowsAutomatically：设置为 true 以允许 JavaScript 在没有用户交互的情况下打开窗口。默认为 false。
• mediaPlaybackRequiresUserGesture：设置为 true 以防止 HTML5 音频或视频自动播放。默认为 true。
• minimumFontSize：设置最小字体大小。Android 默认为 8，iOS 默认为 0。
• verticalScrollBarEnabled：定义是否绘制垂直滚动条。默认为 true。
• horizontalScrollBarEnabled：定义是否绘制水平滚动条。默认为 true。
• resourceCustomSchemes：WebView 必须处理的自定义方案列表。使用 onLoadResourceCustomScheme 事件来拦截具有自定义方案的资源请求。
• contentBlockers：ContentBlocker 列表，这是一组用于在浏览器窗口中阻止内容的规则。
• preferredContentMode：设置 WebView 在加载和渲染网页时需要使用的内容模式。默认为 InAppWebViewUserPreferredContentMode.RECOMMENDED。
• useShouldInterceptAjaxRequest：设置为 true 以便能够监听 shouldInterceptAjaxRequest 事件。默认为 false。
• useShouldInterceptFetchRequest：设置为 true 以便能够监听 shouldInterceptFetchRequest 事件。默认为 false。
• incognito：设置为 true 以打开隐身模式的浏览器窗口。默认为 false。
• cacheEnabled：设置 WebView 是否应使用浏览器缓存。默认为 true。
• transparentBackground：设置为 true 以使 WebView 背景透明。如果您的应用是深色主题，这可以防止初始化时出现白色闪烁。默认为 false。
• disableVerticalScroll：设置为 true 以禁用垂直滚动。默认为 false。
• disableHorizontalScroll：设置为 true 以禁用水平滚动。默认为 false。

InAppWebView Android 特有选项

• textZoom：以百分比设置文本缩放。默认为 100。
• clearSessionCache：设置为 true 以在打开新窗口之前清除会话 cookie 缓存。
• builtInZoomControls：如果 WebView 应使用其内置缩放机制，则设置为 true。默认为 false。
• displayZoomControls：如果 WebView 在使用内置缩放机制时应显示屏幕缩放控件，则设置为 true。默认为 false。
• supportZoom：如果 WebView 不应支持使用其屏幕缩放控件和手势进行缩放，则设置为 false。默认为 true。
• databaseEnabled：如果您希望启用数据库存储 API，则设置为 true。默认为 false。
• domStorageEnabled：如果您希望启用 DOM 存储 API，则设置为 true。默认为 false。
• useWideViewPort：如果 WebView 应启用对“viewport” HTML meta 标签的支持或使用宽视口，则设置为 true。
• safeBrowsingEnabled：设置是否启用安全浏览。安全浏览允许 WebView 通过验证链接来防止恶意软件和网络钓鱼攻击。
• mixedContentMode：配置 WebView 在安全来源尝试从不安全来源加载资源时的行为。
• allowContentAccess：启用或禁用 WebView 中的内容 URL 访问。内容 URL 访问允许 WebView 从系统中安装的内容提供程序加载内容。默认为 true。
• allowFileAccess：启用或禁用 WebView 中的文件访问。请注意，这仅启用或禁用文件系统访问。
• allowFileAccessFromFileURLs：设置在文件方案 URL 上下文中运行的 JavaScript 是否可以访问来自其他文件方案 URL 的内容。
• allowUniversalAccessFromFileURLs：设置在文件方案 URL 上下文中运行的 JavaScript 是否可以访问来自任何来源的内容。
• appCachePath：设置应用程序缓存文件的路径。为了启用应用程序缓存 API，此选项必须设置为应用程序可以写入的路径。
• blockNetworkImage：设置 WebView 是否不应从网络加载图像资源（通过 http 和 https URI 方案访问的资源）。默认为 false。
• blockNetworkLoads：设置 WebView 是否不应从网络加载资源。默认为 false。
• cacheMode：覆盖缓存的使用方式。缓存的使用方式基于导航类型。对于常规页面加载，会检查缓存并根据需要重新验证内容。
• cursiveFontFamily：设置草书字体系列名称。默认为 "cursive"。
• defaultFixedFontSize：设置默认固定字体大小。默认为 16。
• defaultFontSize：设置默认字体大小。默认为 16。
• defaultTextEncodingName：设置解码 HTML 页面时使用的默认文本编码名称。默认为 "UTF-8"。
• disabledActionModeMenuItems：根据 menuItems 标志禁用操作模式菜单项。
• fantasyFontFamily：设置奇幻字体系列名称。默认为 "fantasy"。
• fixedFontFamily：设置固定字体系列名称。默认为 "monospace"。
• forceDark：为此 WebView 设置强制暗模式。默认为 AndroidInAppWebViewForceDark.FORCE_DARK_OFF。
• geolocationEnabled：设置是否启用地理位置 API。默认为 true。
• layoutAlgorithm：设置底层布局算法。这将导致 WebView 重新布局。
• loadWithOverviewMode：设置 WebView 是否以概览模式加载页面，即根据宽度缩放内容以适应屏幕。
• loadsImagesAutomatically：设置 WebView 是否应加载图像资源。请注意，此方法控制所有图像的加载，包括使用 data URI 方案嵌入的图像。
• minimumLogicalFontSize：设置最小逻辑字体大小。默认为 8。
• initialScale：设置此 WebView 的初始缩放比例。0 表示默认值。默认缩放比例的行为取决于 useWideViewPort 和 loadWithOverviewMode 的状态。
• needInitialFocus：告诉 WebView 是否需要设置节点。默认为 true。
• offscreenPreRaster：设置此 WebView 是否在屏幕外但附加到窗口时栅格化图块。
• sansSerifFontFamily：设置无衬线字体系列名称。默认为 "sans-serif"。
• serifFontFamily：设置衬线字体系列名称。默认为 "sans-serif"。
• standardFontFamily：设置标准字体系列名称。默认为 "sans-serif"。
• saveFormData：设置 WebView 是否应保存表单数据。在 Android O 中，平台已实现功能齐全的自动填充功能来存储表单数据。
• thirdPartyCookiesEnabled：启用 WebView 中第三方 cookie 的布尔值。
• hardwareAcceleration：启用 WebView 中硬件加速的布尔值。

InAppWebView iOS 特有选项

• disallowOverScroll：设置为 true 以禁用滚动到达内容边缘时 WebView 的弹性效果。默认为 false。
• enableViewportScale：设置为 true 以允许视口 meta 标签禁用或限制用户缩放的范围。默认为 false。
• suppressesIncrementalRendering：如果您希望 WebView 在内容完全加载到内存中之前抑制内容渲染，请设置为 true。默认为 false。
• allowsAirPlayForMediaPlayback：设置为 true 以允许 AirPlay。默认为 true。
• allowsBackForwardNavigationGestures：设置为 true 以允许左右滑动的手势触发后退-前进列表导航。默认为 true。
• allowsLinkPreview：设置为 true 以允许按住链接显示目标预览。
• ignoresViewportScaleLimits：设置为 true 以便 WebView 始终允许缩放网页，无论作者的意图如何。
• allowsInlineMediaPlayback：设置为 true 以允许 HTML5 媒体在屏幕布局内内联播放，使用浏览器提供的控件而不是原生控件。
• allowsPictureInPictureMediaPlayback：设置为 true 以允许 HTML5 视频以画中画模式播放。默认为 true。
• isFraudulentWebsiteWarningEnabled：一个布尔值，指示是否应显示针对可疑欺诈内容（如网络钓鱼或恶意软件）的警告。
• selectionGranularity：用户可以交互式选择 Web 视图中内容的粒度级别。
• dataDetectorTypes：指定 dataDetectorTypes 值会为匹配该值的内容添加交互性。
• sharedCookiesEnabled：如果 HTTPCookieStorage.shared 的共享 cookie 应用于 WebView 中的每个加载请求，则设置为 true。

InAppWebView 事件

• onWebViewCreated：在 InAppWebView 创建时触发的事件。
• onLoadStart：在 InAppWebView 开始加载 URL 时触发的事件。
• onLoadStop：在 InAppWebView 完成加载 URL 时触发的事件。
• onLoadError：在 InAppWebView 加载 URL 时遇到错误时触发的事件。
• onLoadHttpError：在 InAppWebView 主页面收到 HTTP 错误时触发的事件。
• onProgressChanged：在页面加载的当前进度发生变化时触发的事件。
• onConsoleMessage：在 InAppWebView 收到 ConsoleMessage 时触发的事件。
• shouldOverrideUrlLoading：当 URL 即将在此 WebView 中加载时，给宿主应用程序一个控制的机会。
• onLoadResource：在 InAppWebView 加载资源时触发的事件。
• onScrollChanged：在 InAppWebView 滚动时触发的事件。
• onDownloadStart：当 InAppWebView 识别并启动可下载文件时触发的事件。
• onLoadResourceCustomScheme：当 InAppWebView 在加载资源时找到 custom-scheme 时触发的事件。您可以在此处处理 URL 请求并返回一个 base64 编码的 CustomSchemeResponse 来加载特定资源。
• onTargetBlank：当 InAppWebView 尝试打开带有 target="_blank" 的链接时触发的事件。
• onGeolocationPermissionsShowPrompt：当 Web 内容从指定来源尝试使用地理位置 API，但当前未为该来源设置权限状态时，通知宿主应用程序的事件（仅在 Android 上可用）。
• onJsAlert：当 JavaScript 调用 alert() 方法显示警报对话框时触发的事件。
• onJsConfirm：当 JavaScript 调用 confirm() 方法显示确认对话框时触发的事件。
• onJsPrompt：当 JavaScript 调用 prompt() 方法显示提示对话框时触发的事件。
• onSafeBrowsingHit：当 webview 通知加载的 URL 已被安全浏览标记时触发的事件（仅在 Android 上可用）。
• onReceivedHttpAuthRequest：当 WebView 收到 HTTP 身份验证请求时触发的事件。默认行为是取消请求。
• onReceivedServerTrustAuthRequest：当 WebView 需要执行服务器信任身份验证（证书验证）时触发的事件。
• onReceivedClientCertRequest：通知宿主应用程序处理 SSL 客户端证书请求。
• onFindResultReceived：在页面查找操作进行时触发的事件。
• shouldInterceptAjaxRequest：发送 XMLHttpRequest 到服务器时触发的事件。
• onAjaxReadyStateChange：每当 XMLHttpRequest 的 readyState 属性更改时触发的事件。
• onAjaxProgress：XMLHttpRequest 进行时触发的事件。
• shouldInterceptFetchRequest：通过 Fetch API 向服务器发送请求时触发的事件。
• onNavigationStateChange：当 InAppWebView 的导航状态更改时触发的事件。

InAppBrowser 类

使用原生 WebView 的应用内浏览器。

inAppBrowser.webViewController 可用于访问 InAppWebView API。

创建继承 InAppBrowser 类的类，以便覆盖回调以管理浏览器事件。例如：
示例

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

class MyInAppBrowser extends InAppBrowser {
  @override
  Future onBrowserCreated() async {
    print("\n\nBrowser Created!\n\n");
  }

  @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("Can't load $url.. Error: $message");
  }

  @override
  void onProgressChanged(int progress) {
    print("Progress: $progress");
  }

  @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: url);
  }

  @override
  void onLoadResource(LoadedResource response) {
    print("Started at: " +
        response.startTime.toString() +
        "ms ---> duration: " +
        response.duration.toString() +
        "ms " +
        response.url);
  }

  @override
  void onConsoleMessage(ConsoleMessage consoleMessage) {
    print("""
    console output:
      message: ${consoleMessage.message}
      messageLevel: ${consoleMessage.messageLevel.toValue()}
   """);
  }
}

void main() => runApp(new MyApp());

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

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppBrowser Example'),
        ),
        body: Center(
          child: RaisedButton(
              onPressed: () {
                widget.browser.openFile(
                    assetFilePath: "assets/index.html",
                    options: InAppBrowserClassOptions(
                        inAppWebViewWidgetOptions: InAppWebViewWidgetOptions(
                            inAppWebViewOptions: InAppWebViewOptions(
                              useShouldOverrideUrlLoading: true,
                              useOnLoadResource: true,
                            ))));
              },
              child: Text("Open InAppBrowser")),
        ),
      ),
    );
  }
}

屏幕截图

• iOS

• Android

InAppBrowser 方法

• open({String url = "about:blank", Map<String, String> headers = const {}, InAppBrowserClassOptions options})：在新的 InAppBrowser 实例中打开 url。
• openFile({@required String assetFilePath, Map<String, String> headers = const {}, InAppBrowserClassOptions options})：在新 InAppBrowser 实例中打开给定的 assetFilePath 文件。其他参数与 InAppBrowser.open 相同。
• openData({@required String data, String mimeType = "text/html", String encoding = "utf8", String baseUrl = "about:blank", InAppBrowserClassOptions options})：使用 data 作为内容，以 baseUrl 作为其基础 URL，打开一个新的 InAppBrowser 实例。
• openWithSystemBrowser({@required String url})：这是一个静态方法，可在系统浏览器中打开 url。您无法在此处使用 InAppBrowser 方法！
• show：显示一个此前隐藏的 InAppBrowser 窗口。如果 InAppBrowser 已经可见，则调用此函数无效。
• hide：隐藏 InAppBrowser 窗口。如果 InAppBrowser 已经隐藏，则调用此函数无效。
• close：关闭 InAppBrowser 窗口。
• isHidden：检查 InAppBrowser 实例的 Web 视图是否隐藏。
• setOptions({@required InAppBrowserClassOptions options})：使用新的 options 设置 InAppBrowser 选项并对其进行评估。
• getOptions：以 Map 的形式获取当前的 InAppBrowser 选项。如果选项尚未设置，则返回 null。
• isOpened：如果 InAppBrowser 实例已打开，则返回 true，否则返回 false。

InAppBrowser 选项

它们与 InAppWebView 类相同。
InAppBrowser 类的特定选项是

InAppBrowser 跨平台选项

• hidden：设置为 true 以创建浏览器并加载页面，但不显示它。省略或设置为 false 则浏览器正常打开和加载。默认为 false。
• toolbarTop：设置为 false 以隐藏 WebView 顶部的工具栏。默认为 true。
• toolbarTopBackgroundColor：设置顶部工具栏的自定义背景颜色。
• hideUrlBar：设置为 true 以隐藏顶部工具栏上的 URL 栏。默认为 false。

InAppBrowser Android 特有选项

• hideTitleBar：如果您希望显示标题，请设置为 true。默认为 false。
• toolbarTopFixedTitle：设置操作栏的标题。
• closeOnCannotGoBack：设置为 false 以便在用户点击后退按钮且 WebView 无法返回历史记录时，不关闭 InAppBrowser。默认为 true。
• progressBar：设置为 false 以隐藏顶部工具栏底部的进度条。默认为 true。

InAppBrowser iOS 特有选项

• toolbarBottom：设置为 false 以隐藏 WebView 底部的工具栏。默认为 true。
• toolbarBottomBackgroundColor：设置底部工具栏的自定义背景颜色。
• toolbarBottomTranslucent：设置为 true 以使底部工具栏半透明。默认为 true。
• closeButtonCaption：设置关闭按钮的自定义文本。
• closeButtonColor：设置关闭按钮的自定义颜色。
• presentationStyle：呈现 WebView 时设置自定义模态演示样式。默认为 IosWebViewOptionsPresentationStyle.FULL_SCREEN。
• transitionStyle：呈现 WebView 时设置为自定义过渡样式。默认为 IosWebViewOptionsTransitionStyle.COVER_VERTICAL。
• spinner：设置为 false 以在 WebView 加载页面时隐藏加载指示器。默认为 true。

InAppBrowser 事件

它们与 InAppWebView 类相同，除了 InAppWebView.onWebViewCreated 事件。
InAppBrowser 类的特定事件是

• onBrowserCreated：在 InAppBrowser 创建时触发的事件。
• onExit：在 InAppBrowser 窗口关闭时触发的事件。

ChromeSafariBrowser 类

Android 上的 Chrome Custom Tabs / iOS 上的 SFSafariViewController。

您可以使用 InAppBrowser 备用实例初始化 ChromeSafariBrowser 实例。

创建继承 ChromeSafariBrowser 类的类，以便覆盖回调以管理浏览器事件。例如：

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

}

class MyChromeSafariBrowser extends ChromeSafariBrowser {
  
  MyChromeSafariBrowser(browserFallback) : super(bFallback: browserFallback);

  @override
  void onOpened() {
    print("ChromeSafari browser opened");
  }

  @override
  void onLoaded() {
    print("ChromeSafari browser loaded");
  }

  @override
  void onClosed() {
    print("ChromeSafari browser closed");
  }
}

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  final ChromeSafariBrowser browser = new MyChromeSafariBrowser(new MyInAppBrowser());
  
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ChromeSafariBrowser Example'),
        ),
        body: Center(
          child: RaisedButton(
              onPressed: () async {
                await widget.browser.open(
                    url: "https://flutterdart.cn/",
                    options: ChromeSafariBrowserClassOptions(
                        androidChromeCustomTabsOptions: AndroidChromeCustomTabsOptions(addShareButton: false),
                        iosSafariOptions: IosSafariOptions(barCollapsingEnabled: true)));
              },
              child: Text("Open Chrome Safari Browser")),
        ),
      ),
    );
  }
}

屏幕截图

• iOS

• Android

ChromeSafariBrowser 方法

• open({@required String url, ChromeSafariBrowserClassOptions options, Map<String, String> headersFallback = const {}, InAppBrowserClassOptions optionsFallback})：在新的 ChromeSafariBrowser 实例中打开 url。
• isOpened：如果 ChromeSafariBrowser 实例已打开，则返回 true，否则返回 false。

ChromeSafariBrowser 选项

ChromeSafariBrowser Android 特有选项

• addShareButton：如果您不想要默认的共享按钮，请设置为 false。默认为 true。
• showTitle：如果自定义标签页中不应显示标题，请设置为 false。默认为 true。
• toolbarBackgroundColor：设置工具栏的自定义背景颜色。
• enableUrlBarHiding：设置为 true 以启用 URL 栏在用户滚动页面时隐藏。默认为 false。
• instantAppsEnabled：设置为 true 以启用即时应用。默认为 false。

ChromeSafariBrowser iOS 特有选项

• entersReaderIfAvailable：如果可在网页上自动进入阅读器模式，请设置为 true。默认为 false。
• barCollapsingEnabled：设置为 true 以启用栏折叠。默认为 false。
• dismissButtonStyle：设置退出按钮的自定义样式。默认为 IosSafariOptionsDismissButtonStyle.DONE。
• preferredBarTintColor：设置导航栏和工具栏的自定义背景颜色。
• preferredControlTintColor：设置导航栏和工具栏上控件的自定义颜色。
• presentationStyle：呈现 WebView 时设置自定义模态演示样式。默认为 IosWebViewOptionsPresentationStyle.FULL_SCREEN。
• transitionStyle：呈现 WebView 时设置为自定义过渡样式。默认为 IosWebViewOptionsTransitionStyle.COVER_VERTICAL。

ChromeSafariBrowser 事件

• onOpened：在 ChromeSafariBrowser 打开时触发的事件。
• onLoaded：在 ChromeSafariBrowser 加载完成时触发的事件。
• onClosed：在 ChromeSafariBrowser 关闭时触发的事件。

InAppLocalhostServer 类

此类允许您在 https://:[port]/ 上创建一个简单的服务器，以便能够将您的资源文件加载到服务器上。默认 port 值为 8080。

示例

// ...

InAppLocalhostServer localhostServer = new InAppLocalhostServer();

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

// ...

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
          child: Column(children: <Widget>[
            Expanded(
              child: Container(
                child: InAppWebView(
                  initialUrl: "https://:8080/assets/index.html",
                  initialHeaders: {},
                  initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      )
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
  
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {
  
                  },
                  onLoadStop: (InAppWebViewController controller, String url) {
  
                  },
                ),
              ),
            )]
          )
        ),
      ),
    );
  }

// ...

InAppLocalhostServer 方法

• start：在 https://:[port]/ 上启动服务器。
• close：关闭服务器。

CookieManager 类

此类实现一个单例对象（共享实例），用于管理 WebView 实例使用的 cookie。

iOS 注意事项：iOS 11.0+ 可用。

CookieManager 方法

• instance：获取 cookie 管理器的共享实例。
• setCookie({@required String url, @required String name, @required String value, String domain, String path = "/", int expiresDate, int maxAge, bool isSecure })：为给定的 url 设置 cookie。任何具有相同 host、path 和 name 的现有 cookie 都将被新 cookie 替换。如果 cookie 已过期，则会被忽略。
• getCookies({@required String url})：获取给定 url 的所有 cookie。
• getCookie({@required String url, @required String name})：按 name 获取给定 url 的 cookie。
• deleteCookie({@required String url, @required String name, String domain = "", String path = "/"})：按 name、domain 和 path 删除给定 url 的 cookie。
• deleteCookies({@required String url, String domain = "", String path = "/"})：删除给定 url、domain 和 path 的所有 cookie。
• deleteAllCookies()：删除所有 cookie。

HttpAuthCredentialDatabase 类

此类实现一个单例对象（共享实例），用于管理共享的 HTTP 身份验证凭据缓存。
在 iOS 上，此类使用 URLCredentialStorage 类。
在 Android 上，此类有一个自定义实现，使用 android.database.sqlite.SQLiteDatabase，因为 WebViewDatabase 并不提供与 iOS URLCredentialStorage 相同的功能。

HttpAuthCredentialDatabase 方法

• instance：获取数据库共享实例。
• getAllAuthCredentials：获取所有已保存 HTTP 身份验证凭据的映射列表。
• getHttpAuthCredentials({@required ProtectionSpace protectionSpace})：获取为该 protectionSpace 保存的所有 HTTP 身份验证凭据。
• setHttpAuthCredential({@required ProtectionSpace protectionSpace, @required HttpAuthCredential credential})：为该 protectionSpace 保存 HTTP 身份验证 credential。
• removeHttpAuthCredential({@required ProtectionSpace protectionSpace, @required HttpAuthCredential credential})：移除为该 protectionSpace 保存的 HTTP 身份验证 credential。
• removeHttpAuthCredentials({@required ProtectionSpace protectionSpace})：移除为该 protectionSpace 保存的所有 HTTP 身份验证凭据。
• clearAllAuthCredentials()：移除数据库中所有已保存的 HTTP 身份验证凭据。

GitHub

https://github.com/pichillilorenzo/flutter_inappbrowser