是否可以自定义Flutter Webview错误消息? [英] Is it possible to customize Flutter Webview error message?

问题描述

我正在Flutter中开发WebView移动应用程序，并且我想自定义Webview错误，因为如果客户将关闭其wifi并收到"net :: ERR_ADDRESS_UNREACHABLE"，那不是很好.因此，我想将此页面更改为某些自定义设计，并显示类似此应用程序需要Internet连接，您应该打开wifi"之类的东西.

I'm developing WebView mobile application in Flutter and I would like to customize webview errors, because if customer will have his wifi turned off and he got "net::ERR_ADDRESS_UNREACHABLE", it's not so good. So i would like to change this page to some custom design and show something like "This application requires internet connection, you should turn your wifi on"..

像这样可能吗?我在搜索文档时一无所获.

Is something like this possible? I was searching in docs and found nothing.

非常感谢.

推荐答案

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

Not sure if we can modify the actual message shown from the webview itself, but there is a workaround that I have used.

只要出现错误，就可以使用堆栈小部件并在单独的小部件中显示自定义消息.下面是示例代码.

You can use a Stack widget and show a custom message in a separate widget whenever the error occurs. A sample code is below.

     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控制器，您可以随意使用任何对象.主要动作元素是

The Controller object you see is a GetX controller which I use for state management, you are free to use whatever you like. The main action elements are

1. isError->状态变量，用于监视是否发生错误.

1. isError -> State variable which monitors if an error has occurred.

WebView.onWebResourceError->发生特定错误时调用的回调函数. 您可以将函数传递给此函数，并且仅在发生错误时才调用此回调.这样，您便可以将状态变量isError修改为true，这将依次隐藏Web视图并在屏幕中央显示错误消息.

WebView.onWebResourceError -> Callback function called when a certain error occurs. You can pass a function to this and this callback is only called when an error occurs. With this, you can then modify the state variable isError to be true, which will, in turn, hide the webview and show an error message at the center of the screen.

有了这个，您将获得所需的错误处理.

With this, you will have the error handling you are looking for.

PS:我知道我迟到了这个答案，但我希望其他人觉得它有用.

这篇关于是否可以自定义Flutter Webview错误消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！