首先要安装一个插件: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. 终端命令行编译运行C#程序HelloWorld

    终端命令行编译运行C#程序HelloWorld 今天忽然有人问我,刚学习java程序的时候,一般老师都会建议我们从配置环境变量开始从命令行编译运行程序,那么学习c#的时候基本是直接安装visual s ...

  2. 七牛 OCR 接口调试 & 七牛鉴权 Token 应用

    接口规约 PHP 实现 核心代码 执行结果 源代码 Java 实现 核心代码 执行结果 源代码 [现学现卖]图片内容审核接口 Python 实现 核心代码 执行结果 源代码 Go 实现 核心代码 执行 ...

  3. 振兴中华(dfs or dp )

    小明参加了学校的趣味运动会,其中的一个项目是:跳格子. 地上画着一些格子,每个格子里写一个字,如下所示:(也可参见p1.jpg) 从我做起振 我做起振兴 做起振兴中 起振兴中华 比赛时,先站在左上角的 ...

  4. elk-(七)

    最终架构确定为  logs--->blieb--->redis/kafka--->logstash--->es--->kibana 注意:  geoip下载地址: wge ...

  5. GitLab上传项目到新的分支

    多人协同开发,GitLab上的group仓库里的master分支作为开发分支(最终从dev提交的代码),dev分支作为每个人的代码测试后合并的分支,每个人需要定期merge request自己的分支到 ...

  6. 自己配置 vue 项目 知识体系(自己写脚手架 类似 vue-cli )

    简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件,官方推荐命名法 |-package.json 工程文件(项目依赖.名称.配置) npm ini ...

  7. 洛谷P3384 【模板】树链剖分

    题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式 ...

  8. Gym 101981I - Magic Potion - [最大流][2018-2019 ACM-ICPC Asia Nanjing Regional Contest Problem I]

    题目链接:http://codeforces.com/gym/101981/attachments There are n heroes and m monsters living in an isl ...

  9. 深度学习基础(一)LeNet_Gradient-Based Learning Applied to Document Recognition

    作者:Yann LeCun,Leon Botton, Yoshua Bengio,and Patrick Haffner 这篇论文内容较多,这里只对部分内容进行记录: 以下是对论文原文的翻译: 在传统 ...

  10. 目标检测(四)Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks

    作者:Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun SPPnet.Fast R-CNN等目标检测算法已经大幅降低了目标检测网络的运行时间. ...