flutter中使用webview

时间:2024-08-03 12:37:44

首先要安装一个插件:flutter_webview_plugin

dependencies:
flutter_webview_plugin: ^0.2.1+2

使用方法:

flutter中使用webview
new MaterialApp(
routes: {
"/": (_) => new WebviewScaffold(
url: "https://www.google.com",
appBar: new AppBar(
title: new Text("Widget webview"),
),
)
},
);
flutter中使用webview

FlutterWebviewPlugin 插件提供一个链接到唯一webview的单一实例,这样你就可以在app中的任何地方控制webview,比如监听事件:

final flutterWebviewPlugin = new FlutterWebviewPlugin();
// 监听url地址改变事件
flutterWebviewPlugin.onUrlChanged.listen((String url) { });
flutter中使用webview
//  监听页面滚动事件
final flutterWebviewPlugin = new FlutterWebviewPlugin();
flutterWebviewPlugin.onScrollYChanged.listen((double offsetY) { }); flutterWebviewPlugin.onScrollXChanged.listen((double offsetX) { });
flutter中使用webview

隐藏webview:

final flutterWebviewPlugin = new FlutterWebviewPlugin();  

flutterWebviewPlugin.launch(url, hidden: true);

关闭webview:

flutterWebviewPlugin.close();

画一个内部矩形webview:

flutter中使用webview
final flutterWebviewPlugin = new FlutterWebviewPlugin();  

flutterWebviewPlugin.launch(url,
fullScreen: false,
rect: new Rect.fromLTWH(
0.0,
0.0,
MediaQuery.of(context).size.width,
300.0));
flutter中使用webview

注意:webview并不存在于widget树中,所以你不能在webview中使用如snackbars, dialogs ...这些通知交互widget,更详细一些使用方法可以点击这里

最后,这里是一个使用例子:

flutter中使用webview
 1 import 'package:flutter/material.dart';
2 import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
3
4 class WebViewExample extends StatefulWidget {
5 @override
6 _WebViewExampleState createState() => _WebViewExampleState();
7 }
8
9 class _WebViewExampleState extends State<WebViewExample> {
10 TextEditingController controller = TextEditingController();
11 FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
12 var urlString = "https://google.com";
13
14 launchUrl() {
15 setState(() {
16 urlString = controller.text;
17 flutterWebviewPlugin.reloadUrl(urlString);
18 });
19 }
20
21 @override
22 void initState() {
23 super.initState();
24
25 flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {
26 print(wvs.type);
27 });
28 }
29
30 @override
31 Widget build(BuildContext context) {
32 return WebviewScaffold(
33 appBar: AppBar(
34 title: TextField(
35 autofocus: false,
36 controller: controller,
37 textInputAction: TextInputAction.go,
38 onSubmitted: (url) => launchUrl(),
39 style: TextStyle(color: Colors.white),
40 decoration: InputDecoration(
41 border: InputBorder.none,
42 hintText: "Enter Url Here",
43 hintStyle: TextStyle(color: Colors.white),
44 ),
45 ),
46 actions: <Widget>[
47 IconButton(
48 icon: Icon(Icons.navigate_next),
49 onPressed: () => launchUrl(),
50 )
51 ],
52 ),
53 url: urlString,
54 withZoom: false,
55 );
56 }
57 }
flutter中使用webview