Flutter 中也有WebView,那么Flutter如何加载Web的呢?
Flutter 提供了WebView插件,flutter_webview_plugin: ^0.3.1导入pubspce.yaml 然后就可以直接使用了WebviewScaffold和FlutterWebviewPlugin

WebviewScaffold

Flutter 的Web Widget WebviewScaffold
WebviewScaffold的使用方法

WebviewScaffold(
            url: widget.url,
            //加载的URL
            withZoom: true,
            //允许缩放
            withLocalStorage: true,
            //本地缓存
            hidden: true,
            //默认状态隐藏
            initialChild: Container(
              color: Colors.white,
              child: Center(
                child: Text('Wiating...'),
              ),
            ), //设置初始化界面
          ),

WebviewScaffold 使用方法非常简单,首先了解一下常用的属性

   Key key,
    this.appBar,
     this.url,//String 加载的URL
    this.headers,//添加头部
    this.withJavascript,//bool 是否开启Javascript
    this.clearCache,//bool 清理缓存
    this.clearCookies,//bool 清理cookies
    this.enableAppScheme,//
    this.userAgent,//String userAgent
    this.primary = true,
    this.persistentFooterButtons,
    this.bottomNavigationBar,//Widget 底部的bar
    this.withZoom,//bool 是否允许缩放
    this.withLocalStorage,//bool 是否开启本地缓存
    this.withLocalUrl,//bool
    this.scrollBar,//bool 是否显示scrollBar
    this.supportMultipleWindows,
    this.appCacheEnabled,//bool 是否开启缓存
    this.hidden = false,//bool 是否隐藏
    this.initialChild,//初始化的child,如果hidden = true 显示Widget
    this.allowFileURLs,//bool 是否允许请求本地的FileURL
    this.resizeToAvoidBottomInset = false,
    this.invalidUrlRegex,
    this.geolocationEnabled

上述我们可以将一个Web加载出来了,如果想要监听Web的状态,就需要用到FlutterWebviewPlugin来设置监听.

FlutterWebviewPlugin WebView的状态监听

//监听URL的改变
StreamSubscription<String> _onUrlChanged;
//监听WebView的状态改变
  StreamSubscription<WebViewStateChanged> _onStateChanged;
//监听WebView的错误状态  
  StreamSubscription<WebViewHttpError> _onHttpError;

webviewReference.close(); //关闭页面 防止重新打开
    //URL 改变的监听
    _onUrlChanged = webviewReference.onUrlChanged.listen((url) {});

    //监听加载状态
    _onStateChanged = webviewReference.onStateChanged.listen((state) {
      switch (state.type) {
        case WebViewState.startLoad: //开始加载
          if (_isToMain(state.url) && !exiting) {
            if (widget.backForbid) {
              webviewReference.launch(widget.url);
            } else {
              Navigator.pop(context);
              exiting = true;
            }
          }
          break;
        default:
          break;
      }
    });

    //监听错误状态
    _onHttpError = webviewReference.onHttpError.listen((error) {
      print(error);
    });

需要注意的是,在Widget销毁之前将WebView的监听和view销毁掉.


  void dispose() {
    //销毁web view
    _onUrlChanged.cancel();
    _onStateChanged.cancel();
    _onHttpError.cancel();
    webviewReference.dispose();
    super.dispose();
  }