是否可以自定义 Flutter Webview 错误消息？答案

【问题标题】：Is it possible to customize Flutter Webview error message?是否可以自定义 Flutter Webview 错误消息？
【发布时间】：2020-02-17 17:36:41
【问题描述】：

我正在 Flutter 中开发 WebView 移动应用程序，我想自定义 webview 错误，因为如果客户将他的 wifi 关闭并且他得到“net::ERR_ADDRESS_UNREACHABLE”，那就不太好了。所以我想将此页面更改为一些自定义设计并显示类似“此应用程序需要互联网连接，你应该打开你的 wifi”..

这样的事情可能吗？我在文档中搜索，但一无所获。

非常感谢。

【问题讨论】：

标签： android ios flutter mobile webview

【解决方案1】：

不确定我们是否可以修改从 web 视图本身显示的实际消息，但我使用了一种解决方法。

您可以使用 Stack 小部件并在发生错误时在单独的小部件中显示自定义消息。示例代码如下。

     Stack(
          children: [
            if (!controller.isError)
              WebView(
                javascriptMode: JavascriptMode.unrestricted,
                initialUrl: "https://some-random-url.com",
                onPageFinished: controller.onLoaded,
                onWebResourceError: controller.onError,
              ),
            if (controller.isLoading)
              Center(
                child: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
                ),
              ),
            if (controller.isError)
              Center(
                child: Padding(
                  padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                  child: Text(
                    text: "Something went wrong, please try again", 
                  ),
                ),
              )
          ],
        ),

您看到的 Controller 对象是一个 GetX 控制器，我用于状态管理，您可以随意使用任何您喜欢的东西。主要动作元素是

isError -> 监控是否发生错误的状态变量。
WebView.onWebResourceError -> 发生特定错误时调用的回调函数。您可以向 this 传递一个函数，并且仅在发生错误时才调用此回调。有了这个，您可以将状态变量isError 修改为 true，这反过来会隐藏 web 视图并在屏幕中心显示错误消息。

这样，您将获得您正在寻找的错误处理。

PS：我知道这个答案我迟到了，但我希望别人觉得它有用。

【讨论】：