Flutter 开发：项目加载本地 html 文件的步骤

2021 年 12 月 08 日
本文字数：1177 字
阅读完需：约 4 分钟

前言

Flutter 开发会遇到各种各样的技术，而且 flutter 开发带来了新的“技术革命”，解放了 iOS 单一开发和 Android 单一开发所带来的巨大成本问题，一套 flutter 代码可以适用两种平台，既节约成本又提高了开发效率。Flutter 开发现在是 App 开发的首选技术，那么本篇博文分享一下 Flutter 开发中在项目中加载本地 html 文件并显示的方法。

本篇博文案例只介绍使用 flutter 的 webview 加载项目本地的 HTML 文件，其他方式的 HTML 加载这里不再介绍。加载本地 HTML 的步骤，具体如下所示。

步骤

1、在项目工程里面新建一个存放 HTML 的文件夹；

2、鼠标选中新建的文件夹，然后点击右键，根据下拉菜单栏选择“在 Finder 中显示”，打开文件夹；

3、把桌面的 HTML 文件拖入到新建的“resource”文件中；

4、项目 resource 文件夹中显示 HTML 文件，就说明拖入成功了；

5、最后直接在具体的使用地方加载 flutter 的 webview 加载本地的 HTML 文件；

附

webview.dart 文件的全部代码，如下所示：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewPage extends StatefulWidget {
@override
_AgreementPageState createState() => _AgreementPageState();
}
class _AgreementPageState extends State<WebViewPage> {
WebViewController _webViewController;
  String filePath = 'images/resource/user_.html';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text("用户协议"),
        centerTitle: true,
      ),
      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 文件就不成问题，尤其是对于刚从事 Flutter 开发的开发者来说相当重要的知识点，望周知，这里不再赘述。

以上就是本章全部内容，欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”，三掌柜的新浪微博“三掌柜 666”，欢迎关注！

发布于: 2021 年 12 月 08 日阅读数: 18

原文链接:【http://xie.infoq.cn/article/b96fe89b678d38ce1d04442eb】。文章转载请联系作者。