如何修复 webview_flutter 中的白屏？答案

【问题标题】：How to fix white screen in webview_flutter?如何修复 webview_flutter 中的白屏？
【发布时间】：2019-06-05 04:40:14
【问题描述】：

使用 inital_url: "https://kreatryx.com" 运行 webview_flutter 示例应用程序(https://github.com/flutter/plugins/tree/master/packages/webview_flutter/example) 在 Android 上，它只显示白屏，右下角有 Zopim 聊天栏。在 iOS 上它运行良好。安卓有什么解决办法吗？

我已经尝试过的： 1. Flutter 通道开发 2. Flutter 频道大师

【问题讨论】：

标签： android webview flutter

【解决方案1】：

感谢本文中的github Issues reference，以下解决方案对我编辑Info.plist很有用：

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key> <true/>
  <key>NSAllowsArbitraryLoadsInWebContent</key> <true/>
</dict>

我是使用 Info.plist 的新手，不确定 <dict> 标记是否可以这样嵌套，但显然没问题。

【讨论】：

我没有为我工作。我用了另一个 lib flutter_inappwebview，效果很好。

【解决方案2】：

你可以试试我的插件flutter_inappwebview，这是一个 Flutter 插件，可以让你添加内联 WebViews 或打开应用内浏览器窗口，并且有很多事件、方法和选项来控制 WebViews。

使用您的 URL 的完整示例：

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new MyApp());
}

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

class _MyAppState extends State<MyApp> {

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialUrl: "https://kreatryx.com",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                      androidInAppWebViewOptions: AndroidInAppWebViewOptions(
                        domStorageEnabled: true,
                        databaseEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                  ),
                ),
              ),
            ]))
    );
  }
}

它在 Android 和 iOS 平台上都可以正常工作。结果如下：

【讨论】：

【解决方案3】：

如果您使用的url 不是全英文或有一些空格字符。您需要像这样对网址进行编码

 WebView(
      initialUrl: Uri.encodeFull(yourUrl),
      ...
 )

【讨论】：

非常感谢，这正是我所需要的，在过去 6 小时内一直遇到这个问题

【解决方案4】：

更新

类似于Android Webview: "Uncaught TypeError: Cannot read property 'getItem' of null"

settings.setDomStorageEnabled(true); 不见了。

原创

webview_flutter 目前不会自动重定向。

https://kreatryx.com 重定向到 https://www.kreatryx.com，插件不遵循该重定向，只显示 https://kreatryx.com 返回的内容，这没什么。

关注https://github.com/flutter/flutter/issues/25351

【讨论】：

Android 使用 Chrome，iOS 使用 Safari，因此不同的行为并不令人意外，尽管它们应该尽可能地表现相同。
我的错误与上述Android Webview问题中的错误完全相同。我只希望 settings.setDomStorageEnabled(true);解决了这个问题。无论如何，谢谢，我已经用两个操作系统上的屏幕截图更新了我的问题。
我能够使用 original 答案解决问题，并在此处发布了我的答案。关于 update ，您能否解释一下如何获取 settings 的实例以及应该在哪里调用 settings.setDomStorageEnabled(true); .. 是在 Flutter 代码中还是在 iOS 代码中？到目前为止，我无法找到任何参考。
@GeneBo github.com/flutter/plugins/pull/1836/files 可能会有所帮助

【解决方案5】：

因为有另一个可用的插件能够自动重定向到其请求的页面。使用给定的 dart 插件：flutter_webview_plugin 0.3.0+2

您可以通过以下网址使用该插件：https://pub.dartlang.org/packages/flutter_webview_plugin#-readme-tab-

在此处找到示例代码：

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "https://kreatryx.com",
          appBar: new AppBar(
            title: new Text("Widget webview"),
          ),
        ),
      },
    );

【讨论】：

这是最后的手段。只是您提到的插件可以正常工作，但需要注意的是它漂浮在颤振之上，因此小吃栏或任何此类组件都隐藏在其后面。