Flutter Webview 更改网页不可用答案

【问题标题】：Flutter Webview change webpage is not availableFlutter Webview 更改网页不可用
【发布时间】：2019-08-14 08:30:54
【问题描述】：

如果用户没有互联网，我想在我的 WebView 应用程序中更改“网页不可用”。

我阅读了文档，并尝试了其他一些 puglins

import 'package:webview_flutter/webview_flutter.dart';
[...]
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const WebView(
        initialUrl: 'https://google.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

【问题讨论】：

您可以在没有连接时呈现本地html文件，如此答案stackoverflow.com/questions/53831312/…所示
我试过这个，Medium 发布到，但没有错误处理，显示屏幕网页不可用
我偶然发现了这个插件，使用了url_launcher，封装了try catch块语句，解决了问题
很高兴听到这个消息！

标签： android webview dart flutter android-webview

【解决方案1】：

你可以试试我的插件flutter_inappwebview。当 WebView 加载 url（onLoadError 事件）和收到 HTTP 错误（例如 403、404 等）（onLoadHttpError 事件）时，它具有管理错误的事件。

如果用户没有互联网连接，则带有加载自定义错误页面的工作代码的完整示例：

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://flutter.dev/",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                        inAppWebViewOptions: InAppWebViewOptions(
                          debuggingEnabled: true,
                        ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

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

                    },
                    onLoadError: (InAppWebViewController controller, String url, int code, String message) async {
                      print("error $url: $code, $message");

                      var tRexHtml = await controller.getTRexRunnerHtml();
                      var tRexCss = await controller.getTRexRunnerCss();

                      controller.loadData(data: """
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <style>$tRexCss</style>
  </head>
  <body>
    $tRexHtml
    <p>
      URL $url failed to load.
    </p>
    <p>
      Error: $code, $message
    </p>
  </body>
</html>
                  """);
                    },
                    onLoadHttpError: (InAppWebViewController controller, String url, int statusCode, String description) async {
                      print("HTTP error $url: $statusCode, $description");
                    },
                  ),
                ),
              ),
            ]))
    );
  }
}

结果是：

此示例直接加载 html 源代码，但您可以从 assets 文件夹或 url 加载 html 文件。

只是为了好玩：我的插件包含 Google Chrome t-rex 游戏的 javascript 和 css 代码！

【讨论】：

使用插件修复问题不是解决方案！要么解释你的插件是如何解决问题的，要么只是添加评论......

【解决方案2】：

只需将 onWebResourceError 方法添加到您的 Webview。

    WebView(
        onWebResourceError: (WebResourceError webviewerrr) {
            print("Handle your Error Page here");
        },
        initialUrl: "your url"
        javascriptMode: JavascriptMode.unrestricted,
        onPageFinished: (String url) {
            print('Page finished loading:');
        },
    );

【讨论】：