Flutter WebView加载及加载进度条

Flutter加载Web目前为止体验还是不是很好与JS的交互较弱，目前插件方面推荐两个，webview_flutter和flutter_webview_plugin.

 

我个人觉得flutter_webview_plugin要好一些，webview_flutter加载和显示方面明显差一点。flutter_webview_plugin调用的是原生控件加载，webview_flutter是官方维护的插件，但还是有比较多的问题。 

下面分别看看两种加载的方式。

首先去添加依赖库，注意格式对齐，然后getPackage一下。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^0.3.15+1

新创建一个WebView.dart文件，因为要考虑到重加载和显示进度条等原因，所以选用StatefulWidget。

class MyWebView extends StatefulWidget {
  final  url;
  final  title;
  MyWebView({Key key,@required this.url,@required this.title}) : super (key : key);
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {

  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

创建两个属性，一个url加载地址，一个title用来显示标题。接下来开始加载

class MyWebView extends StatefulWidget {
  final  url;
  final  title;
  MyWebView({Key key,@required this.url,@required this.title}) : super (key : key);
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: widget.url,
    };
  }
}

基本用法就是这样，接下来着重说flutter_webview_plugin的用法。

首先还是去添加依赖库，注意格式对齐，获取资源

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_plugin: ^0.3.0

@override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text(widget.title),
      ),
      url: widget.url,
    );
  }

基本用法就是这样，是通过一个WebviewScaffold去加载，基本用法和scaffold差不多，里面还有多个属性，例如，清空缓存，放大倍数设置，滑动的进度条显示开关等，是否允许JS等的设置，具体用法可以直接去源代码查看。

下面说进度条。

在Flutter里面提供了一个Widget LinearProgressIndicator 用于显示进度控件，我们只需把它放在appBar的bottom属性上就可以了，

@override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text(widget.title),
        bottom: PreferredSize(
          child: _progressBar(lineProgress,context),
          preferredSize: Size.fromHeight(3.0),
        ),
      ),
      url: widget.url,
    );
  }

_progressBar(double progress,BuildContext context) {

  return LinearProgressIndicator(
    backgroundColor: Colors.white70.withOpacity(0),
    value: progress == 1.0 ? 0 : progress,
    valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
  );
}

然后通过FlutterWebviewPlugin这个类去监听Web加载的情况，

FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();

  double lineProgress = 0.0;

  void initState() {
    super.initState();
    flutterWebviewPlugin.onProgressChanged.listen((progress){
      print(progress);
        setState(() {
          lineProgress = progress;
        });
    });
  }

然后记得销毁

 @override 
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }

看看实现的效果如何。

这样我们就简单实现了在Flutter上加载一个网页以及进度条的显示。

有需要的可以去下载demo：Flutter加载WebView及进度条的实现