Flutter中使用WebView

需要安装一个插件:flutter_webview_plugin

1
2
dependencies:
flutter_webview_plugin: ^0.2.1+2

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

new MaterialApp(
routes: {
"/": (_) => new WebviewScaffold(
url: "http://www.appblog.cn",
appBar: new AppBar(
title: new Text("Widget webview"),
),
withZoom: true,
withLocalStorage: true,
hidden: true,
initialChild: Container(
color: Colors.redAccent,
child: const Center(
child: Text('Waiting.....'),
),
),
),
},
);

事件监听

FlutterWebviewPlugin插件提供一个链接到唯一WebView的单一实例,这样就可以在App中的任何地方控制WebView

监听url地址改变事件

1
2
3
4
5
final flutterWebviewPlugin = new FlutterWebviewPlugin();
//监听url地址改变事件
flutterWebviewPlugin.onUrlChanged.listen((String url) {

});

监听页面状态改变

1
2
3
4
//监听页面状态改变
flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
print(wvs.type);
});

监听页面滚动事件

1
2
3
4
5
6
7
8
9
//监听页面滚动事件
final flutterWebviewPlugin = new FlutterWebviewPlugin();
flutterWebviewPlugin.onScrollYChanged.listen((double offsetY) {

});

flutterWebviewPlugin.onScrollXChanged.listen((double offsetX) {

});

隐藏WebView

1
2
final flutterWebviewPlugin = new FlutterWebviewPlugin();
flutterWebviewPlugin.launch(url, hidden: true);

关闭WebView

1
flutterWebviewPlugin.close();

画一个内部矩形WebView

1
2
3
4
5
6
7
final flutterWebviewPlugin = new FlutterWebviewPlugin();
flutterWebviewPlugin.launch(url,
rect: new Rect.fromLTWH(
0.0,
0.0,
MediaQuery.of(context).size.width,
300.0));

注意:WebView并不存在于Widget树中,所以不能在WebView中使用如snackbars、dialogs等这些通知交互Widget

FlutterWebviewPlugin示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class WebViewDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _WebViewDemoPagePageState();
}

class _WebViewDemoPagePageState extends State<WebViewDemoPage> {
TextEditingController controller = TextEditingController();
FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
var urlString = "http://www.appblog.cn";

@override
void initState() {
super.initState();
//监听页面状态改变
flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
print(wvs.type);
});
//监听页面滚动事件
flutterWebviewPlugin.onScrollYChanged.listen((double offsetY) {
print('offsetY: $offsetY');
});

flutterWebviewPlugin.onScrollXChanged.listen((double offsetX) {
print('offsetX: $offsetX');
});
}

launchUrl() {
setState(() {
urlString = controller.text;
flutterWebviewPlugin.reloadUrl(urlString);
});
}

Widget build(BuildContext context) {
// return WebviewScaffold(
// appBar: new AppBar(
// title: new Text('WebView Demo'),
// ),
// url: 'http://www.appblog.cn',
// );
return WebviewScaffold(
appBar: AppBar(
title: TextField(
autofocus: false,
controller: controller,
textInputAction: TextInputAction.go,
onSubmitted: (url) => launchUrl(),
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Enter Url Here",
hintStyle: TextStyle(color: Colors.white),
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.navigate_next),
onPressed: () => launchUrl(),
)
],
),
url: urlString,
withZoom: false,
);
}
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :