如何在Webview Flutter中制作自定义错误页面

Question

我是 Flutter 新手。目前我正在构建使用 flutter webview 插件的网络应用程序，但我对互联网连接有疑问。当用户没有连接时，该应用程序会提供一个默认错误页面，如

Webpage not available
The webpage at https://covid19.who.int/ could be not be loaded because:
net:::ERR_Internet_disconnected

如何使用自定义代码显示隐藏的自定义错误页面url？我的正确代码是：

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:covidwho/layout/myAppBar.dart';

class Who extends StatefulWidget {
  @override
  _WhoState createState() => _WhoState();
}

class _WhoState extends State<Who> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(),
      body: Container(
        child: WebviewScaffold(
          url: "https://covid19.who.int/",
          withJavascript: true,
          withLocalStorage: true,
          hidden: true,
          initialChild: Container(
              color: Colors.white,
              child: const Center(
                child: CircularProgressIndicator(
                  backgroundColor: Colors.black,
                ),
              )),
        ),
      ),
    );
  }
}

Answer 1

为此你需要实施

Stream<String> onError 网络视图事件。
别忘了处理webview flutterWebviewPlugin.dispose()

这是一个代码示例

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

String selectedUrl = 'https://flutter.io';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Instance of WebView plugin
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  // On destroy stream
  StreamSubscription _onDestroy;

  //  On Http error
  StreamSubscription<WebViewHttpError> _onHttpError;
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    flutterWebViewPlugin.launch(selectedUrl);

    // Add a listener to on destroy WebView, so you can make came actions.
    _onDestroy = flutterWebViewPlugin.onDestroy.listen((_) {
      if (mounted) {
        // Actions like show a info toast.
        _scaffoldKey.currentState.showSnackBar(
            const SnackBar(content: const Text('Webview Destroyed')));
      }
    });

    _onHttpError =
        flutterWebViewPlugin.onHttpError.listen((WebViewHttpError error) {
      if (mounted) {
        //do your customization here
      }
    });
  }

  @override
  void dispose() {
    // Every listener should be canceled, the same should be done with this stream.
    _onDestroy.cancel();
    _onHttpError.cancel();
    flutterWebViewPlugin.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
    );
  }
}

如何在Webview Flutter中制作自定义错误页面

How to Make Customize Error Page in Webview Flutter

mobile

sdk

android

flutter