在 flutter webview 中显示自定义错误页面而不是 android 返回的默认错误页面

Question

我正在为我的 webview 应用程序使用flutter_inappwebview插件。有时，由于网络问题，网页无法加载，Android 会在屏幕上抛出错误页面，提示页面未找到或超时错误。

我需要替换android返回的默认错误页面的内容。我能够使用 onLoadError 方法捕获页面未找到错误。

请指导我使用 onLoadError 方法更改默认错误页面。

WillPopScope(
  onWillPop: onWillPop,
  child: InAppWebView(
    initialUrl: 'https://myurl.com',
    onWebViewCreated: (InAppWebViewController controller) {
      webView = controller;
    },
    onLoadError: (InAppWebViewController controller, String url, int i,
        String s) async {
      print('CUSTOM_HANDLER: $i, $s');
      /** instead of printing the console message i want to render a static page or display static message **/
    },
    onLoadHttpError: (InAppWebViewController controller, String url,
        int i, String s) async {
      print('CUSTOM_HANDLER: $i, $s');
      /** instead of printing the console message i want to render a static page or display static message **/
    },
  ),
)

Answer 1

如果想留在该WebView领域内，那么您只需将带有自定义错误消息的 html 文件添加到您的资产中即可。但您也可以使用Stack.

选项Widget在顶部，使用Stack

InAppWebViewController webViewController;
bool showErrorPage = false;
@override
Widget build(BuildContext context) {
  return Container(
    child: Stack(
      children: <Widget>[
        InAppWebView(
          initialUrl: 'https://fail.page.asd',
          onWebViewCreated: (InAppWebViewController controller) {
            webViewController = controller;
          },
          onLoadError: (
            InAppWebViewController controller,
            String url,
            int i,
            String s
          ) async {
            print('CUSTOM_HANDLER: $i, $s');
            /** instead of printing the console message i want to render a static page or display static message **/
            showError();
          },
          onLoadHttpError: (InAppWebViewController controller, String url,
              int i, String s) async {
            print('CUSTOM_HANDLER: $i, $s');
            /** instead of printing the console message i want to render a static page or display static message **/
            showError();
          },
        ),
        showErrorPage ? Center(
          child: Container(
            color: Colors.white,
            alignment: Alignment.center,
            height: double.infinity,
            width: double.infinity,
            child: Text('Page failed to open (WIDGET)'),
          ),
        ) : SizedBox(height: 0, width: 0),
      ],
    ),
  );
}

void showError(){
  setState(() {
    showErrorPage = true;
  });
}

void hideError(){
  setState(() {
    showErrorPage = false;
  });
}

使用自定义 html 文件 代码替换错误页面的选项

InAppWebViewController webViewController;
bool showErrorPage = false;
@override
Widget build(BuildContext context) {
  return Container(
    child: InAppWebView(
      initialUrl: 'https://fail.page.asd',
      onWebViewCreated: (InAppWebViewController controller) {
        webViewController = controller;
      },
      onLoadError: (
        InAppWebViewController controller,
        String url,
        int i,
        String s
      ) async {
        print('CUSTOM_HANDLER: $i, $s');
        /** instead of printing the console message i want to render a static page or display static message **/
        webViewController.loadFile(assetFilePath: "assets/error.html");
      },
      onLoadHttpError: (InAppWebViewController controller, String url,
          int i, String s) async {
        print('CUSTOM_HANDLER: $i, $s');
        /** instead of printing the console message i want to render a static page or display static message **/
        webViewController.loadFile(assetFilePath: "assets/error.html");
      },
    ),
  );
}

pubspec.yaml

assets:
    - assets/error.html