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';

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

在 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()); }}

最终预览的效果如下

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

总结

以上是内存溢出为你收集整理的Flutter中如何加载并预览本地的html文件的方法全部内容，希望文章能够帮你解决Flutter中如何加载并预览本地的html文件的方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。