首先要安装一个插件: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的更多相关文章

  1. 在Flutter中嵌入Native组件的正确姿势是...

    引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...

  2. Unity中使用WebView

    Unity中使用WebView @(设计) 需求,最近游戏中需要引入H5直播页面和更新比较频繁的赛事页面,需求包括:加密传参数.和Unity交互,在Unity框架下其实有几种方案: 内置函数Appli ...

  3. Android中脱离WebView使用WebSocket实现群聊和推送功能

    WebSocket是Web2.0时代的新产物,用于弥补HTTP协议的某些不足,不过他们之间真实的关系是兄弟关系,都是对socket的进一步封装,其目前最直观的表现就是服务器推送和聊天功能.更多知识参考 ...

  4. Android 中的 WebView实现 Html5 标签网页加载

    自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...

  5. Android中使用WebView, WebChromeClient和WebViewClient加载网页 (能够执行js)

    Android中使用WebView, WebChromeClient和WebViewClient加载网页   在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android ...

  6. Android中通过WebView控件实现与JavaScript方法相互调用的地图应用

    在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...

  7. 让Android中的webview支持页面中的文件上传

    android webview在默认情况下是不支持网页中的文件上传功能的: 如果在网页中有<input type="file" />,在android webview中 ...

  8. 从零学习Fluter(五):Flutter中手势滑动拖动已经网络请求

    从六号开始搞Flutter,到今天写这篇blog已经过了4天时间,文档初步浏览了一遍,写下了这个demo.demo源码分享在github上,现在对flutter有种说不出的喜欢了.大家一起搞吧! 废话 ...

  9. Flutter 中 JSON 解析

    本文介绍一下Flutter中如何进行json数据的解析.在移动端开发中,请求服务端返回json数据并解析是一个很常见的使用场景.Android原生开发中,有GsonFormat这样的神器,一键生成Ja ...

随机推荐

  1. ux.form.field.GridDate 支持快速选择日期的日期控件

    效果如图,亲测6.2.1版本可用 /** *支持快速选择日期的日期控件 */ Ext.define('ux.form.field.GridDate', { extend: 'Ext.form.fiel ...

  2. HTTP简介,http是一个属于应用层的面向对象的协议

    引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1. ...

  3. js版的in_array的实现方法

    这是一个JS版的判断数组内的元素的方法. var arr = ['a','b','c']; console.log(in_array('b',arr)); // true function in_ar ...

  4. 11.1 vue(2)

    2018-11-1 19:41:00 2018年倒数第二个月! 越努力越幸运!!!永远不要高估自己! python视频块看完了!还有30天吧就结束了! 今天老师讲的vue 主要是看官网文档 贴上连接  ...

  5. [Manthan, Codefest 18][Codeforces 1037E. Trips]

    题目链接:1037E - Trips 题目大意:有n个人,m天,每天晚上都会有一次聚会,一个人会参加一场聚会当且仅当聚会里有至少k个人是他的朋友.每天早上都会有一对人成为好朋友,问每天晚上最多能有多少 ...

  6. archlinux 下使用 aria2+uget 作为下载工具

    1.创建配置文件 sudo vim /etc/aria2/aria2.conf ## /etc/aria2/aria2.conf### '#'开头为注释内容, 选项都有相应的注释说明, 根据需要修改 ...

  7. thinkphp 百度地图Api坐标计算 A坐标距离B坐标多少公里 并按照距离近的排序 坐标排序 外部字段排序

    感谢我磊哥 函数封装方法: //计算距离 /* **$a 可多数坐标 就是可数组类型的 ***$b 是登录者的坐标 ***ps: lat经度 lng纬度 经度在前纬度在后 *** ***/ funct ...

  8. A股时间窗口

    春节躁动行情:大消费,文娱影视 一号文件:泛农业股 两会行情:两会概念 糖酒会:白酒,糖业 五穷六绝:半年节点,[市场缺钱] 暑期档:文娱影视 国庆行情:军工,文娱影视 年底:阳历年底,[市场缺钱] ...

  9. Codeforces 1089E - Easy Chess - [DFS+特判][2018-2019 ICPC, NEERC, Northern Eurasia Finals Problem E]

    题目链接:https://codeforces.com/contest/1089/problem/E Elma is learning chess figures. She learned that ...

  10. 基于 redis 的分布式锁实现 Distributed locks with Redis debug 排查错误

    小结: 1. 锁的实现方式,按照应用的实现架构,可能会有以下几种类型: 如果处理程序是单进程多线程的,在 python下,就可以使用 threading 模块的 Lock 对象来限制对共享变量的同步访 ...