Flutter 利用 flutter_inappwebview 加载 App 本地 HTML 文件

在 Flutter 开辟中，加载本地 HTML 文件是一个常见的需求，尤其是在需要展示离线内容或自定义页面时。flutter_inappwebview 是一个功能强大的插件，支持加载本地文件和网络资源。本文将详细介绍如何利用 flutter_inappwebview 加载 App 本地 HTML 文件，包括传统加载资源文件的方法和从 App 目录加载文件的方法。
一、传统加载资源文件

• HTML 文件放置
  起首，将 .html 文件拖入工程中。通常，我会将文件放在工程的根目录下，与 pubspec.yaml 同级。
  然后，打开 pubspec.yaml 文件，在 assets: 下添加该文件，例如：
  

1. flutter:
2.   assets:
3.     - membership_agreement.html

复制代码

• 加载本地 HTML 文件
  接下来，利用 rootBundle 读取文件内容，并通过 InAppWebView 加载 HTML 数据。
  dart复制
  

1. import 'package:flutter/material.dart';
2. import 'package:flutter/services.dart' show rootBundle;
3. import 'package:flutter_inappwebview/flutter_inappwebview.dart';
5. class LocalHtmlPage extends StatefulWidget {
6.   final String html;
8.   LocalHtmlPage({required this.html});
10.   @override
11.   _LocalHtmlPageState createState() => _LocalHtmlPageState();
12. }
14. class _LocalHtmlPageState extends State<LocalHtmlPage> {
15.   late InAppWebViewController _webViewController;
17.   Future<String> _getFile() async {
18.     return await rootBundle.loadString(widget.html);
19.   }
21.   @override
22.   Widget build(BuildContext context) {
23.     return Scaffold(
24.       appBar: AppBar(title: Text("加载本地 HTML 文件")),
25.       body: FutureBuilder<String>(
26.         future: _getFile(),
27.         builder: (context, snapshot) {
28.           if (snapshot.hasData) {
29.             final String htmlUrl = Uri.dataFromString(
30.               snapshot.data!,
31.               mimeType: 'text/html',
32.               encoding: Encoding.getByName('utf-8'),
33.               base64: true,
34.             ).toString();
35.             return InAppWebView(
36.               initialUrlRequest: URLRequest(url: Uri.parse(htmlUrl)),
37.               onWebViewCreated: (controller) {
38.                 _webViewController = controller;
39.               },
40.               onLoadStart: (controller, url) {
41.                 print('开始加载: $url');
42.               },
43.               onLoadStop: (controller, url) {
44.                 print('加载完毕: $url');
45.               },
46.               onConsoleMessage: (controller, consoleMessage) {
47.                 print('Console message: ${consoleMessage.message}');
48.               },
49.             );
50.           }
51.           return Center(child: Text('读取失败'));
52.         },
53.       ),
54.     );
55.   }
56. }

复制代码

二、加载 App 目录文件

• 需求背景
  在某些场景下，HTML 文件大概需要先下载到 App 的本地目录，然后再从目录中加载。例如，从网络下载 HTML 文件并保存到本地缓存目录。
  
• 核心代码
  以下是利用 flutter_inappwebview 加载 App 目录中的 HTML 文件的完备代码示例：
  

1. import 'dart:io';
2. import 'package:flutter/foundation.dart';
3. import 'package:flutter/material.dart';
4. import 'package:flutter_inappwebview/flutter_inappwebview.dart';
5. import 'package:path_provider/path_provider.dart';
7. class LocalHtmlPage extends StatefulWidget {
8.   final String htmlFileName;
10.   LocalHtmlPage({required this.htmlFileName});
12.   @override
13.   _LocalHtmlPageState createState() => _LocalHtmlPageState();
14. }
16. class _LocalHtmlPageState extends State<LocalHtmlPage> {
17.   late InAppWebViewController _webViewController;
19.   Future<File?> getLocalHtmlFile() async {
20.     final directory = await getApplicationDocumentsDirectory();
21.     final filePath = "${directory.path}/${widget.htmlFileName}";
22.     final file = File(filePath);
23.     if (await file.exists()) {
24.       return file;
25.     }
26.     return null;
27.   }
29.   Future<void> load() async {
30.     try {
31.       final file = await getLocalHtmlFile();
32.       if (file != null) {
33.         print('加载本地 HTML 文件: file://${file.path}');
34.         _webViewController.loadUrl(
35.           urlRequest: URLRequest(url: Uri.file(file.path)),
36.         );
37.       } else {
38.         print('文件不存在');
39.       }
40.     } catch (e, stackTrace) {
41.       print('加载本地 HTML 文件异常: $e');
42.       print(stackTrace);
43.     }
44.   }
46.   @override
47.   Widget build(BuildContext context) {
48.     return Scaffold(
49.       appBar: AppBar(title: Text("加载本地 HTML 文件")),
50.       body: InAppWebView(
51.         onWebViewCreated: (controller) {
52.           _webViewController = controller;
53.           load();
54.         },
55.         onLoadStart: (controller, url) {
56.           print('开始加载: $url');
57.         },
58.         onLoadStop: (controller, url) {
59.           print('加载完毕: $url');
60.         },
61.         onProgressChanged: (controller, progress) {
62.           print('WebView 加载中 (进度: $progress%)');
63.         },
64.         onConsoleMessage: (controller, consoleMessage) {
65.           print('Console message: ${consoleMessage.message}');
66.         },
67.         gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
68.           Factory(() => EagerGestureRecognizer()),
69.         }.toSet(),
70.       ),
71.     );
72.   }
73. }

复制代码

三、留意事项
文件路径问题：
确保文件路径精确，并且文件确实存在于指定路径下。
假如文件路径是动态天生的，确保路径格式精确。
文件内容问题：
确保 HTML 文件内容是有效的，且没有语法错误。
可以在浏览器中直接打开该 HTML 文件，确认其是否正常表现。
iOS 网络权限：
假如加载的文件路径是 file://，确保 iOS 的网络权限配置精确。在 Info.plist 中添加以下配置：

1. <key>NSAppTransportSecurity</key>
2. <dict>
3.     <key>NSAllowsArbitraryLoads</key>
4.     <true/>
5. </dict>

复制代码

日志输出：
假如需要关闭日志输出，可以在 Dart 代码中过滤日志消息，或在 iOS 和 Android 项目中配置日志级别。
通过以上方法，你可以灵活地利用 flutter_inappwebview 加载本地 HTML 文件，无论是通过资源文件还是从 App 目录加载。渴望本文能帮助你更好地实现这一功能。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。