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

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

}

}

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