Flutter中如何加载并预览本地的html文件的方法

直接进入主题，大概步骤如下

在 assets 创建需要访问 html 文件，如下

这里创建一个files文件夹，专门来放这些静态 html 文件.

在 pubspec.yaml 中配置访问位置

   assets:
  - assets/images/
  - assets/files/

在 pubspec.yaml 添加 webview_flutter 插件依赖

  webview_flutter: ^0.3.15+1
  // 具体版本请查看官网

进入实际的代码操作

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

class AgreementPage extends StatefulWidget {
 @override
 _AgreementPageState createState() => _AgreementPageState();
}

class _AgreementPageState extends State<AgreementPage> {
 WebViewController _webViewController;
 String filePath = 'assets/files/agreement.html';

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: Text('享你来服务条款')),
   body: WebView(
    initialUrl: '',
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
     _webViewController = webViewController;
     _loadHtmlFromAssets();
    },
   )
  );
 }

  _loadHtmlFromAssets() async {
  String fileHtmlContents = await rootBundle.loadString(filePath);
  _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
      mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
    .toString());
 }
}

最终预览的效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Flutter中如何加载并预览本地的html文件的方法

    Flutter中如何加载并预览本地的html文件的方法

    直接进入主题,大概步骤如下 在 assets 创建需要访问 html 文件,如下 这里创建一个files文件夹,专门来放这些静态 html 文件. 在 pubspec.yaml 中配置访问位置 assets: - assets/images/ - assets/files/ 在 pubspec.yaml 添加 webview_flutter 插件依赖 webview_flutter: ^0.3.15+1 // 具体版本请查看官网 进入实际的代码操作 import 'dart:convert';

  • Flutter中网络图片加载和缓存的实现

    前言 应用开发中经常会碰到网络图片的加载,通常我们会对图片进行缓存,以便下次加载同一张图片时不用再重新下载,在包含有大量图片的应用中,会大幅提高图片展现速度.提升用户体验且为用户节省流量.Flutter本身提供的Image Widget已经实现了加载网络图片的功能,且具备内存缓存的机制,接下来一起看一下Image的网络图片加载的实现. 重温小部件Image 常用小部件Image中实现了几种构造函数,已经足够我们日常开发中各种场景下创建Image对象使用了. 有参构造函数: Image(Key k

  • 几个优化WordPress中JavaScript加载体验的插件介绍

    WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能.为了最大限度地保证兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件.但是根据 Yahoo 开发者论坛的建议,加载 JavaScript 应该尽量在页尾以提高页面的显示(响应.渲染)速度.本文根据作者的使用经验介绍几个相关插件,并说明如何在某些特殊页面仍然在页头加载 JavaScript. 下面先简单介绍几个相关的优化 JavaScript 的 Wo

  • Python实现爬取网页中动态加载的数据

    在使用python爬虫技术采集数据信息时,经常会遇到在返回的网页信息中,无法抓取动态加载的可用数据.例如,获取某网页中,商品价格时就会出现此类现象.如下图所示.本文将实现爬取网页中类似的动态加载的数据. 1. 那么什么是动态加载的数据? 我们通过requests模块进行数据爬取无法每次都是可见即可得,有些数据是通过非浏览器地址栏中的url请求得到的.而是通过其他请求请求到的数据,那么这些通过其他请求请求到的数据就是动态加载的数据.(猜测有可能是js代码当咱们访问此页面时就会发送得get请求,到其

  • 解析javascript图片懒加载与预加载的分析总结

    本篇文章主要介绍了懒加载和预加载两种技术的解析,废话不多说,一起来看吧. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 懒加载的意义及实现方式有: 意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 实现方式:

  • 深入理解js中的加载事件

    前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.javascript文件.CSS文件等外部资源),就会触发window上的load事件 [注意]IE8-浏览器不会为该事件设置srcElement属性,而其他浏览器的target属性指向document window.onload = function(e){ e = e || event; var tar

  • Pytorch加载部分预训练模型的参数实例

    前言 自从从深度学习框架caffe转到Pytorch之后,感觉Pytorch的优点妙不可言,各种设计简洁,方便研究网络结构修改,容易上手,比TensorFlow的臃肿好多了.对于深度学习的初学者,Pytorch值得推荐.今天主要主要谈谈Pytorch是如何加载预训练模型的参数以及代码的实现过程. 直接加载预选脸模型 如果我们使用的模型和预训练模型完全一样,那么我们就可以直接加载别人的模型,还有一种情况,我们在训练自己模型的过程中,突然中断了,但只要我们保存了之前的模型的参数也可以使用下面的代码直

  • 解决vue的 v-for 循环中图片加载路径问题

    先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

  • Tensorflow加载Vgg预训练模型操作

    很多深度神经网络模型需要加载预训练过的Vgg参数,比如说:风格迁移.目标检测.图像标注等计算机视觉中常见的任务.那么到底如何加载Vgg模型呢?Vgg文件的参数到底有何意义呢?加载后的模型该如何使用呢? 本文将以Vgg19为例子,详细说明Tensorflow如何加载Vgg预训练模型. 实验环境 GTX1050-ti, cuda9.0 Window10, Tensorflow 1.12 展示Vgg19构造 import tensorflow as tf import numpy as np impo

  • 浅谈Tensorflow加载Vgg预训练模型的几个注意事项

    写这个博客的关键Bug: Value passed to parameter 'input' has DataType uint8 not in list of allowed values: float16, bfloat16, float32, float64.本博客将围绕 加载图片 和 保存图片到本地 来详细解释和解决上述的Bug及其引出来的一系列Bug. 加载图片 首先,造成上述Bug的代码如下所示 image_path = "data/test.jpg" # 本地的测试图片

随机推荐