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

 更新时间:2019年11月24日 09:41:23   作者:任重道远  
这篇文章主要介绍了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());
 }
}

最终预览的效果如下

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

相关文章

  • android 监听网络状态的变化及实战的示例代码

    android 监听网络状态的变化及实战的示例代码

    本篇文章主要介绍了android 监听网络状态的变化及实战的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • ShareSDK造成App崩溃的一个BUG原因分析以及Fix方法

    ShareSDK造成App崩溃的一个BUG原因分析以及Fix方法

    这篇文章主要介绍了ShareSDK造成App崩溃的一个BUG原因分析以及Fix方法,使用的是Cocos2d-x专用ShareSDK组件,需要的朋友可以参考下
    2014-04-04
  • Flutter基本组件Basics Widget学习

    Flutter基本组件Basics Widget学习

    本文详细讲解了Flutter基本组件Basics Widget,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • Kotlin匿名函数使用介绍

    Kotlin匿名函数使用介绍

    定义时不取名字的函数,我们称之为匿名函数,匿名函数通常整体传递给其他函数或者从其他函数返回,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Android bindservice失败解决方法

    Android bindservice失败解决方法

    这篇文章主要介绍了Android bindservice失败解决方法的相关资料,希望通过本文能帮助大家解决这样的问题,需要的朋友可以参考下
    2017-08-08
  • Android刘海屏、水滴屏全面屏适配小结

    Android刘海屏、水滴屏全面屏适配小结

    这篇文章主要介绍了Android刘海屏、水滴屏全面屏适配小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • Android中解决EditText放到popupWindow中,原有复制、粘贴、全选、选择功能失效问题

    Android中解决EditText放到popupWindow中,原有复制、粘贴、全选、选择功能失效问题

    这篇文章主要介绍了Android中解决EditText放到popupWindow中,原有复制、粘贴、全选、选择功能失效问题 的相关资料,需要的朋友可以参考下
    2016-04-04
  • Android把svg图片转为jpg保存到相册图库

    Android把svg图片转为jpg保存到相册图库

    这篇文章主要为大家详细介绍了Android把svg图片转为jpg保存到相册图库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Android开发之AAR文件的生成与使用步骤

    Android开发之AAR文件的生成与使用步骤

    Android中的aar主要是针对于Android Library而言的,可以简单的理解为是对Android Library的打包,这个包的格式为.aar,下面这篇文章主要给大家介绍了关于Android开发之AAR文件的生成与使用步骤的相关资料,需要的朋友可以参考下
    2022-07-07
  • Android属性动画实现图片从左到右逐渐消失

    Android属性动画实现图片从左到右逐渐消失

    这篇文章主要介绍了Android属性动画实现图片从左到右逐渐消失,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11

最新评论