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 {
@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 {
@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(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及进度条的实现