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

相关推荐
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
哲科软件4 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风4 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 小时前
npm install安装的node_modules是什么
前端·npm·node.js