html项目_Flutter开发:项目加载本地html文件的步骤

Flutter开发会遇到各种各样的技术,而且flutter开发带来了新的“技术革命”,解放了iOS单一开发和Android单一开发所带来的巨大成本问题,一套flutter代码可以适用两种平台,既节约成本又提高了开发效率。Flutter开发现在是App开发的首选技术,那么本篇博文分享一下Flutter开发中在项目中加载本地html文件并显示的方法。本篇博文案例只介绍使用flutter的webview加载项目本地的HTML文件,其他方式的HTML加载这里不再介绍。加载本地HTML的步骤,具体如下所示:1、在项目工程里面新建一个存放HTML的文件夹;

8cfa4befe05fc9eec2471ee9f08c5dce.png

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

585572ee0bf7bdc479267bf5cd41d102.png

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

bb0f29f7a1acaa3d3d5f31563193f43c.png

466dad27d3b74c65b1ac9fac569f1ea3.png

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

b266f9cc2bc1de08e621f4ad5a374f9b.png

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

6c17e7c41eaa4cfc5fa57e149d91ded1.png

db1b1e24017ff62ec34f6bd3121d5cda.png

b16baad3dad86bf0449d3b52c9da7932.png

附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 { 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”,欢迎关注!三掌柜的微信公众号:

bf7d9c1bad2b514827aab590dc4bc66f.png

三掌柜的新浪微博:

4650737629f6aa220f261bc2838a82ef.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter 是谷歌开发的跨平台移动应用开发框架,它能够将 Dart 代码编译为本地平台的 ARM 代码,在 iOS 和 Android 平台上运行。Flutter 支持与原生代码混合使用,这使得开发人员可以使用 Flutter 开发 UI,同使用原生代码处理一些高级功能。 如果你想将 Flutter 作为一个 aar 库嵌入到 Android 项目中,可以按照以下步骤: 1. 在 Flutter 项目中创建插件 Flutter 插件是一种将 Flutter 功能转换为原生代码的机制。插件包含了一个 Dart API 和一个原生 API,它们之间通过平台通道进行通信。要将 Flutter 项目作为 aar 库嵌入到 Android 项目中,你需要将 Flutter 插件创建为一个 aar 库。 你可以通过运行以下命令创建一个 Flutter 插件: ``` flutter create --template=plugin my_flutter_plugin ``` 这将创建一个名为 my_flutter_plugin 的插件,并在其中包含一个 Flutter 模块和一个 Android 模块。 2. 将 Flutter 插件打包为 aar 库 要将 Flutter 插件打包为 aar 库,你需要对 Android 模块进行一些修改。首先,将 Android 模块中的 build.gradle 文件中的 apply plugin 行更改为: ``` apply plugin: 'com.android.library' ``` 然后,将以下内容添加到 build.gradle 文件的末尾: ``` android { ... sourceSets { main.java.srcDirs += "${flutterRoot}/packages/flutter_module/src/main/java" } } task copyFlutterFramework(type: Copy) { from new File(project(':flutter').projectDir, 'build/app/outputs/flutter-apk/app-release-unsigned.apk') into('libs') { rename { 'app-release-unsigned.apk' } } } preBuild.dependsOn(copyFlutterFramework) ``` 这将允许你将 Flutter 模块中的 Dart 代码编译为本地平台的代码,并将其打包到 aar 文件中。 最后,在 Android 模块的 build.gradle 文件中添加以下依赖项: ``` dependencies { implementation 'com.google.android.material:material:1.0.0' implementation project(':flutter') } ``` 3. 将 aar 库添加到 Android 项目中 要将 aar 库添加到 Android 项目中,你需要将 aar 文件复制到 Android 项目的 libs 目录中,并将以下内容添加到 Android 项目的 build.gradle 文件中: ``` repositories { flatDir { dirs 'libs' } } dependencies { implementation(name:'my_flutter_plugin', ext:'aar') } ``` 这将允许 Android 项目在构建引用 aar 库。 这些步骤将允许你将 Flutter 作为一个 aar 库嵌入到 Android 项目中。当你构建 Android 项目Flutter 将作为一个原生库被包含在内,可以通过平台通道与 Dart 代码进行通信。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值