flutter开发web项目
Flutter Web在美团外卖的实践 - 掘金
让项目支持web ：flutter create .
运行：flutter run -d chrome
flutter run -d chrome --web-renderer html
打包：flutter build web --release --web-renderer html
官方链接：Flutter on the Web
参考视频：构建 Flutter web 应用 (From Mobile App to web App)_哔哩哔哩_bilibili
部署参考链接：「Flutter for Web 」创建与部署 - 简书
发布到GitHub上：使用Flutter Web和GitHub Actions构建发布自己的Github Pages网站 - 简书
前端项目自动部署GitHub Pages_哔哩哔哩_bilibili
docker官网：Docker 教程 | 菜鸟教程
去除链接URL中的"#"
1.在pubspec.yaml文件中添加如下代码：
# 去除网页URL中的“#”(hash) https://flutter.cn/docs/development/ui/navigation/url-strategies
url_strategy: 0.2.0
2.在main.dart文件中添加如下代码：
import 'package:url_strategy/url_strategy.dart';
/// 去除URL中的“#”(hash)，仅针对Web。默认为setHashUrlStrategy
/// 注意本地部署和远程部署时`web/index.html`中的base标签，https://github.com/flutter/flutter/issues/69760
setPathUrlStrategy();dio网络请求配置：
if (!Utils.isWeb) {
// https://developer.github.com/v3/#user-agent-required
options.headers['User-Agent'] = 'Mozilla/5.0';
}Flutter Web使用手机浏览器调试
在android studio中只有电脑端的chrome，如果想用手机上的浏览器调试项目，需要本地部署一下：
flutter run -d chrome --web-hostname 192.168.3.156 --web-port 8080
ip地址换成你电脑的ip地址即可，然后手机和电脑在同一网络环境下，就可以输入上面的ip+端口号访问web项目了
flutter web渲染器相关
html ： 通过平台的 canvas 和 Element 完成布局绘制；
canvaskit ： 通过 Webassembly + Skia 绘制控件；
虽然都知道 canvavskit 更接近 Flutter 的设计理念，但是由于它构建的 wasm 文件大小和字体加载等问题带来的成本考虑，业界一般会选用更轻量化的 html 引擎
官方默认使用渲染器：
1.手机浏览器：HTML。CSS，Canvas元素和SVG元素。 该渲染器的下载大小较小。
2.桌面浏览器：Canvaskit。使用Skia编译为WebAssembly并使用WebGL渲染。 该渲染器与Flutter移动设备和台式机完全一致，具有更快的性能，并且不太可能在浏览器之间出现差异，但下载大小增加了大约2MB。
指定浏览器：
flutter run -d chrome --web-renderer html
flutter run -d chrome --web-renderer canvaskit
参考：超详细，Flutter2.0构建Web应用的实际体验｜技术点评 - 掘金
首次加载过慢问题优化(倒序)主要文件：CupertinoIcons.ttf main.dart.js 和 MaterialIcons-Regular.otf
总结：
-
去除无用的 icon 引用；
-
使用
tree-shake-icons优化引用矢量图库； -
通过
deferred-components实现懒加载分包； -
开启
gzip等压缩算法压缩main.dart.js；
7.通过外部手段（没试过）：开启 gzip 等压缩算法压缩 main.dart.js
例如通过在部署时开启 gzip 或者 brotli 压缩，开始 gzip 后大概可以让 main.dart.js 下降到 400k 左右
6.MaterialIcons-Regular.otf优化
虽然在项目中我们会使用到 MaterialIcons 的一些矢量图标，但是每次加载都要全量加载一个 1.5 MB 的字体库文件显然并不符合逻辑，所以我们可以先运行 flutter build apk ，然后通过如下命令，将 Android 上已经 shake-icons 的 MaterialIcons-Regular.otf 资源复制到已经编译好的 web/ 目录下。
cp -r ./build/app/intermediates/flutter/release/flutter_assets/ ./build/web/assets优化大小：1.5mb 优化后大小：3kb
5.main.dart.js拆包&优化：通过 deferred-components 实现懒加载分包；
等待过程优化可在一定程度上提升等待体验，单治标不治本，要想加载快还得让加载的资源小，对于多页面应用，可以将整个 main.dart.js 拆分成多个小的包，在使用的过程中逐步加载，目前了解到美团有相应的技术，但实现细节未知，有待研究。可参考 github.com/flutter/flu…
参考：http://t.csdn.cn/hgaUO
大前端时代的乱流：带你了解最全面的 Flutter Web
Flutter 延迟组件原理与自定义 【包体积优化 _ 动态化http://t.csdn.cn/7j61V
4.等待过程优化
页面在 js 加载完成之前都是白屏，给人一种页面卡死的感觉，为此可以在 js 加载完成前增加加载动画不至于让页面一直白屏。参考App上管用的做法，可在数据加载出来之前插入骨骼屏，实现如下：
或者：
gsy_flutter_demo
参考链接：https://juejin.cn/post/7068533637364334622
1.渲染引擎 Canvaskit 下载太慢，这个Canvaskit是从https://unpkg.com去加载的，需要
解决方案：1.使用镜像 2.下载canvaskit.js 和 canvaskit.wasm 这两个文件放到自己的服务器,或其它高速服务器 3.指定使用html渲染器
下载四个文件(参考：10.1.1.flutter-web内网 - 简书)
(1)canvaskit.js和canvaskit.wasm
下载地址: https://unpkg.com/browse/[email protected]/bin/
(2)KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
下载地址: https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
(3)css2?family=Noto_Sans+SC
下载地址: https://fonts.googleapis.com/css2?family=Noto+Sans+SC
(4)将以上四个文件放到web/assets/canvaskit/文件夹中
通过命令行直接运行：(release/debug)
flutter run --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=web/assets/canvaskit/ --release -d chrome打包命令
flutter build web --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=web/assets/canvaskit/ --release 2.字体问题Flutter web默认使用Noto字体，一般电脑上都不会带有这个字体，所以会在线加载这个字体，导致加载缓慢还会产生乱码
解决方案：使用自定义字体，把字体资源放到项目中，然后使用字体：
flutter:
fonts:
- family: Raleway
fonts:
- asset: assets/fonts/Raleway-Regular.ttf
- asset: assets/fonts/Raleway-Medium.ttf
- asset: assets/fonts/Raleway-SemiBold.ttf
3、去除无用的 icon 引用
若只是个人网页之类的简单web项目，可以删除一些系统的资源包，pubspec.yaml中cupertino_icons: ^1.0.2，uses-material-design: true注释掉，这样可以少加载这些资源文件。
参考：
10.1.1.flutter-web内网 - 简书
解决 Flutter Web 加载canvaskit.wasm过慢的方法 - 简书
https://sb.sb/blog/css-cdn/
解决 Flutter Web 加载慢的问题_Amoour的博客-CSDN博客_flutter web 加载慢
Flutter Web 常见问题及兼容性处理 - 掘金
Flutter web 服务指定端口
指定绑定IP --web-hostname 0.0.0.0
指定绑定端口 --web-port 8888
如: flutter run -d chrome --web-port 8888 --web-hostname 0.0.0.0
flutter web 的路径模式和hash模式
参考：最小单元 flutter for webURL导航与hashtag(#)的处理 - 简书
flutter web开发遇到的问题
1.flutter web项目上线后，点击刷新按钮(F5)报错404问题(使用nginx)
原因：我项目中使用的是路径模式，在刷新页面(或单个页面链接单独访问)时将会请求当前的链接，而Nginx无法找到对应的页面
解决：使用Nginx配置，让所有路由（url）下的页面重写到 index.html即可，在Nginx配置文件nginx.conf中加入如下配置。(index.html根据实际页面配置)
location / {
try_files $uri $uri/ /index.html;
}
参考：Vue项目上线后，点击刷新按钮（f5）报错404的问题（使用nginx）_Honins的博客-CSDN博客_vue项目f5刷新404
2.文字不能选择
解决：使用SelectableText
3.图片不能拖拽（暂时没解决）
4.标题栏自带的返回按钮
解决：系统的AppBar(
title: Text('景区购票'),
automaticallyImplyLeading: false,//去掉自带的返回按钮
)
参考：flutter web遇到的坑 - HemJohn - 博客园