Flutter加载本地HTML文件

      Flutter加载WebView使用了官方插件webview_flutter: ^3.0.4(https://pub.dev/packages/webview_flutter)。WebView网页地址内容转为本地HTML文件的方式,可以用火狐浏览器打开网页后,右击查看页面源代码,将里面的代码复制后粘贴进本地的html文件中即可。

     在pubspec.yaml中添加依赖:webview_flutter: ^3.0.4。

      加载本地HTML文件这里记录两种方式:

      1、以HTML字符串的形式进行加载。

      新建一个dart文件,将源代码复制后拷贝进去,格式如下:

const String kLocalExamplePage = '''
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load file or HTML string example</title>
</head>
<body>

<h1>Local demo page</h1>
<p>
This is an example page used to demonstrate how to load a local file or HTML
string using the <a href="https://pub.dev/packages/webview_flutter">Flutter
webview</a> plugin.
</p>

</body>
</html>
''';

 

Future<void> _loadLocalHtmlString(PrivacyDetailType type) async {
    await _webViewController.loadHtmlString(kLocalExamplePage);
}

      2、以HTML本地文件的形式进行加载。

 

 

 Future<void> _loadHtmlFromAssets(PrivacyDetailType type) async {

      String filePath = 'assets/files/user_privacy.html';

     String fileText = await rootBundle.loadString(filePath);  _webViewController.loadUrl(Uri.dataFromString      fileText,

      mimeType: 'text/html',

      encoding: Encoding.getByName('utf-8')
).toString());
}

涉及的依赖库:

import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';


 

posted @ 2022-07-27 11:37  Joel Zeng  阅读(3071)  评论(0编辑  收藏  举报