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

Question

我正在为我的网络视图应用程序使用 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

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

Display custom error page instead of default error page returned by android in flutter webview

error-handling

webview

flutter