flutter中使用webview

首先要安装一个插件:flutter_webview_plugin

dependencies:
  flutter_webview_plugin: ^0.2.1+2

使用方法:

复制代码
new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
              url: "https://www.google.com",
              appBar: new AppBar(
                title: new Text("Widget webview"),
              ),
            )
      },
    );
复制代码

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

final flutterWebviewPlugin = new FlutterWebviewPlugin();
//  监听url地址改变事件
flutterWebviewPlugin.onUrlChanged.listen((String url) {
  
});
复制代码
//  监听页面滚动事件
final flutterWebviewPlugin = new FlutterWebviewPlugin(); flutterWebviewPlugin.onScrollYChanged.listen((double offsetY) { }); flutterWebviewPlugin.onScrollXChanged.listen((double offsetX) { });
复制代码

隐藏webview:

final flutterWebviewPlugin = new FlutterWebviewPlugin();  

flutterWebviewPlugin.launch(url, hidden: true);

关闭webview:

flutterWebviewPlugin.close();

画一个内部矩形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));
复制代码

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

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

复制代码
 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 }
复制代码

posted @ 2019-04-04 09:33  CrossPython  阅读(1976)  评论(0编辑  收藏  举报