Flutter调用本地web

前言:

在目前Flutter 环境中,使用在线 webview 是一种很常见的行为

而在 app 环境中,离线使用则更有必要

1.环境准备

将依赖导入

2.引入前端代码

前端代码有两种情况

一种是使用打包工具 build 而来的前端代码

另一种情况是直接使用 HTML 文件

两种情况无非都会形成以下几个文件

3.flutter引入并使用

需要将 Flutter 中导入的所有 css、js 文件都引入 pubspec.yaml 中的默认文件中

如图

4.flutter中使用

注:在 Flutter 中使用时 不可直接使用 assets/index.html

其中安卓环境和苹果环境各不同

代码如下

dart 复制代码
if (Platform.isAndroid) {
  return 'file:///android_asset/flutter_assets/' + path;
} else {
  return 'file://Frameworks/App.framework/flutter_assets/' + path;
}

5.其他

index.html

引入的 jscss 中也需要加入

file:///android_asset/flutter_assets/

file://Frameworks/App.framework/flutter_assets/

-- 欢迎点赞、关注、转发、收藏【我码玄黄】,gonghao同名

相关推荐
2501_916008895 分钟前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
I烟雨云渊T9 分钟前
iOS原生与Flutter的交互编程
flutter·ios·交互
半生过往42 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听44 分钟前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle1 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎1 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特1 小时前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle1 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落1 小时前
HTML5 音乐敲击乐静态界面
前端
海在掘金611271 小时前
告别"拼写错误":TS如何让你的代码"字字精准"
前端