1. 程式人生 > >flutter中使用webview

flutter中使用webview

set log 插件 scaffold tex con mit snackbar olly

首先要安裝一個插件: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 }

flutter中使用webview