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 }

flutter中使用webview的更多相关文章
- 在Flutter中嵌入Native组件的正确姿势是...
引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...
- Unity中使用WebView
Unity中使用WebView @(设计) 需求,最近游戏中需要引入H5直播页面和更新比较频繁的赛事页面,需求包括:加密传参数.和Unity交互,在Unity框架下其实有几种方案: 内置函数Appli ...
- Android中脱离WebView使用WebSocket实现群聊和推送功能
WebSocket是Web2.0时代的新产物,用于弥补HTTP协议的某些不足,不过他们之间真实的关系是兄弟关系,都是对socket的进一步封装,其目前最直观的表现就是服务器推送和聊天功能.更多知识参考 ...
- Android 中的 WebView实现 Html5 标签网页加载
自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...
- Android中使用WebView, WebChromeClient和WebViewClient加载网页 (能够执行js)
Android中使用WebView, WebChromeClient和WebViewClient加载网页 在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android ...
- Android中通过WebView控件实现与JavaScript方法相互调用的地图应用
在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...
- 让Android中的webview支持页面中的文件上传
android webview在默认情况下是不支持网页中的文件上传功能的: 如果在网页中有<input type="file" />,在android webview中 ...
- 从零学习Fluter(五):Flutter中手势滑动拖动已经网络请求
从六号开始搞Flutter,到今天写这篇blog已经过了4天时间,文档初步浏览了一遍,写下了这个demo.demo源码分享在github上,现在对flutter有种说不出的喜欢了.大家一起搞吧! 废话 ...
- Flutter 中 JSON 解析
本文介绍一下Flutter中如何进行json数据的解析.在移动端开发中,请求服务端返回json数据并解析是一个很常见的使用场景.Android原生开发中,有GsonFormat这样的神器,一键生成Ja ...
随机推荐
- Qt编写自定义控件3-速度仪表盘
前言 速度仪表盘,写作之初的本意是用来展示当前测试的网速用的,三色圆环+数码管显示当前速度,Qt自带了数码管控件QLCDNumber,直接集成即可,同时还带有动画功能,其实也可以用在汽车+工业领域等, ...
- Grunt jshint Warning: Path must be a string . Received null Use
用grunt监视文件,出现'Warning: Path must be a string . Received null Use --force to continue 原因是没有设置reporter ...
- Git查看两个版本之间修改了哪些文件
gdiff 63e3b647d55fcc643e793e650c893be8601719b1 548cdaf01dbc2f08d1ca0b697a24afe512b75a2f --stat git l ...
- python全栈开发 * 15知识点汇总 * 180621
#15 函数二 与 匿名函数1.dir() # 查看内置属性,将对象所有方法名放在另一个列表中.dic={"水果":"香蕉",'蔬菜':"土豆&quo ...
- jmeter安装与环境变量配置
因jmeter是java开发的,要想运行java开发的程序,必须先下载JDK一.jdk 1.下载jdk jdk下载地址:https://www.oracle.com/technetwork/java ...
- CentOS7.6 安装Docker
删除已安装的Docker # Uninstall installed docker sudo yum remove docker \ docker-client \ docker-client-lat ...
- windows 10 超级优化,同时解决本地磁盘100%的问题
windows 10 超级优化,同时解决本地磁盘100%的问题 我的系统是笔记本I7处理器,配置了web服务器IIS 和一个数据库(mysql7),同时启用了虚拟机(表中已禁用),以及安装了offic ...
- c++stack容器介绍
c++stack(堆栈)是一个容器的改编,它实现了一个先进后出的数据结构(FILO) 使用该容器时需要包含#include<stack>头文件: 定义stack对象的示例代码如下: sta ...
- 多对多关联模型,MANY_TOMANY
先分别创建三张表:think_user think_group think_user_group user 表里有id.name字段 group 表里有id.groupName字段 user_ ...
- EntityFreamWork 项目总结
前段时间一直在忙着处理一个B2C的商城项目,未来得整理这次项目的心得,今天偶有空闲便写下这篇文章以记录整个项目的设计及自我总结. 这个项目是我综合传智播客教学基础将传统三层架构与EntityFrame ...