flutter 加载webview

安装插件  flutter_webview_plugin: ^0.2.1

从listview点击item跳转页面加载详情页案例

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; /**
* @Description 新闻网页,h5
* @Author zhibuyu
* @Date 2018/10/19 9:09
* @Version 1.0
*/
class NewsWebPage extends StatefulWidget{
String news_url;
String title; NewsWebPage(this.news_url,this.title); @override
State<StatefulWidget> createState()=>new NewsWebPageState(news_url,title); }
class NewsWebPageState extends State<NewsWebPage>{
String news_url;
String title;
// 标记是否是加载中
bool loading = true;
// 标记当前页面是否是我们自定义的回调页面
bool isLoadingCallbackPage = false;
GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey();
// URL变化监听器
StreamSubscription<String> onUrlChanged;
// WebView加载状态变化监听器
StreamSubscription<WebViewStateChanged> onStateChanged;
// 插件提供的对象,该对象用于WebView的各种操作
FlutterWebviewPlugin flutterWebViewPlugin = new FlutterWebviewPlugin(); NewsWebPageState(this.news_url, this.title); @override
void initState() {
onStateChanged = flutterWebViewPlugin.onStateChanged.listen((WebViewStateChanged state){
// state.type是一个枚举类型,取值有:WebViewState.shouldStart, WebViewState.startLoad, WebViewState.finishLoad
switch (state.type) {
case WebViewState.shouldStart:
// 准备加载
setState(() {
loading = true;
});
break;
case WebViewState.startLoad:
// 开始加载
break;
case WebViewState.finishLoad:
// 加载完成
setState(() {
loading = false;
});
if (isLoadingCallbackPage) {
// 当前是回调页面,则调用js方法获取数据
parseResult();
}
break;
}
});
}
// 解析WebView中的数据
void parseResult() {
// flutterWebViewPlugin.evalJavascript("get();").then((result) {
// // result json字符串,包含token信息
//
// });
} @override
Widget build(BuildContext context) {
List<Widget> titleContent = [];
titleContent.add(new Text(
title,
style: new TextStyle(color: Colors.white),
));
if (loading) {
// 如果还在加载中,就在标题栏上显示一个圆形进度条
titleContent.add(new CupertinoActivityIndicator());
}
titleContent.add(new Container(width: 50.0));
// WebviewScaffold是插件提供的组件,用于在页面上显示一个WebView并加载URL
return new WebviewScaffold(
key: scaffoldKey,
url:news_url, // 登录的URL
appBar: new AppBar(
title: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: titleContent,
),
iconTheme: new IconThemeData(color: Colors.white),
),
withZoom: true, // 允许网页缩放
withLocalStorage: true, // 允许LocalStorage
withJavascript: true, // 允许执行js代码
);
} @override
void dispose() {
// 回收相关资源
// Every listener should be canceled, the same should be done with this stream.
onUrlChanged.cancel();
onStateChanged.cancel();
flutterWebViewPlugin.dispose();
super.dispose();
}
}

  

在跳转的地方调用

Navigator.of(widget.parentContext).push(

new MaterialPageRoute(builder: (context) {

return new NewsWebPage(link,tiltes,);//link,title为需要传递的参数

},

));

  

flutter的webview案例的更多相关文章

  1. 有模有样解决Flutter里Webview无法访问HTTP页面的问题

    探索过程 Android9(好像是吧)开始谷歌就默认不让开发者访问不安全HTTP内容了,如果非要用HTTP,那必须在networkSecurityConfig里配置cleartextTrafficPe ...

  2. Flutter,webview里面实现上传和下载的功能

    前提:Flutter 与 webview(vue) 一起开发的项目 开始的时候并没有想到什么移动端的,所以上传就用input,下载就用iframe来实现,然而真机实测的时候,input那个方法IOS支 ...

  3. 【Flutter】Flutter 一些常用库

    Flutter社区和资源传送门 新: 慕课网<Flutter入门与案例实战>   |   中文网<Flutter实战>电子书 字体图标生成 http://fluttericon ...

  4. flutter_html 和 WebView 解析html 和 build.gradle源码

    一.flutter_html 涉及的 api 接口: http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20 二.Flu ...

  5. flutter资料

    Flutter社区和资源传送门 新: 慕课网<Flutter入门与案例实战>   |   中文网<Flutter实战>电子书 字体图标生成 http://fluttericon ...

  6. 为什么 Flutter 是跨平台开发的终极之选

    跨平台开发是当下最受欢迎.应用最广泛的框架之一.能实现跨平台开发的框架也五花八门,让人眼花缭乱.最流行的跨平台框架有 Xamarin.PhoneGap.Ionic.Titanium.Monaca.Se ...

  7. flutter全栈开发学习资料大全 免费flutter学习视频 文字教程!

    flutter今年特别火,google推出flutter就是为了一次开发全平台应用,包括PC端,手机wap端,android,ios直接生成APP应用,如果真的能像谷歌说的,那我们开发人员就真的好好学 ...

  8. Flutter跨平台框架的使用-iOS最新版

    科技引领我们前行 [前言] 1:先简单的介绍下Flutter,它是一款跨平台应用SDK,高性能跨平台实现方案(暂时讨论iOS和Android), 它不同于RN,少了像RN的JS中间桥接层,所以它的性能 ...

  9. Canonical通过Flutter启用Linux桌面应用程序支持

    子标题:Ubuntu团队为所有Linux发行版上的Flutter应用程序制作了一个新的基于GTK +的主机. 此文翻译自:https://medium.com/flutter/announcing-f ...

随机推荐

  1. 关于linux下ntp时间同步服务的安装与配置

    1.安装ntp服务,要使用时间同步.那么服务端与客户端都需要使用如下命令安装NTP软件包 [root@ ~]# yum install ntp -y 2.如果只是作为客户端的话,配置则可以非常简单,编 ...

  2. Spring AOP @AspectJ进阶

    @AspectJ可以使用切点函数定义切点,我们还可以使用逻辑运算符对切点进行复核运算得到复合的切点,为了在切面中重用切点,我们还可以对切点进行命名,以便在其他的地方引用定义过的切点.当一个连接点匹配多 ...

  3. spring-boot(三) HowTo

    Spring Boot How To 1. 简介 本章节将回答一些常见的"我该怎么做"类型的问题,这些问题在我们使用spring Boot时经常遇到.这绝不是一个详尽的列表,但它覆 ...

  4. spark streaming集成flume

    1. 安装flume flume安装,解压后修改flume_env.sh配置文件,指定java_home即可. cp hdfs jar包到flume lib目录下(否则无法抽取数据到hdfs上): $ ...

  5. 作业二 分布式版本控制系统Git的安装与使用

    第一步:Git bash配置 修改用户名和邮箱地址: $ git config --global user.name "zzj" $ git config --global use ...

  6. 【实战】Docker入门实践二:Docker服务基本操作 和 测试Hello World

    操作环境 操作系统:CentOS7.2 内存:1GB CPU:2核 Docker服务常用命令 docker服务操作命令如下 service docker start #启动服务 service doc ...

  7. SQL UPDATE嵌套使用

    遇见的问题 1.更新语句,更新字段 UPDATE number SET sumab = 2 WHERE id =1 求和 SELECT SUM(num_a+num_b)FROM number WHER ...

  8. android从IIS/asp.net下载apk文件

    解决步骤: 1.web.config中 <configuration>  <configSections> ...    <section name="rewr ...

  9. Unity3D加密保护解决方案

    精锐5加密锁支持Unity3D代码及资源保护,并提供授权方案 产品简介 可使用Virbox Protector加壳工具对Unity3D代码进行加密.Unity3D使用开源mono C#语法,代码会编译 ...

  10. python中使用redis

    准备 安装redis服务 点击查看Ubuntu中安装Redis. 安装依赖包 pip install redis 使用 import redis 创建连接 1.普通连接: conn = redis.R ...