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同名

相关推荐
只_只12 分钟前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience17 分钟前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹18 分钟前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo19 分钟前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse20 分钟前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye25 分钟前
前端架构师,是架构什么
前端·架构
全马必破三27 分钟前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库32 分钟前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库
一枚前端小能手37 分钟前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_999937 分钟前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js