flutter中使用webview
阿新 • • 發佈:2018-10-28
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 = newFlutterWebviewPlugin(); 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