Flutter 学习之路

1. Container 设置最大和最小宽度

Container(
	width: 220, // 宽度
   constraints: BoxConstraints(
      minWidth: 200, // 最小宽度
      minHeight:200,
      maxWidth: 500, // 最大宽度
      maxHeight:500,
  ),

2. flutter打包

旧项目开启web端构建

flutter config --enable-web

web的渲染模式

HTML渲染模式

flutter会采用HTML的custom element，CSS，Canvas和SVG来渲染UI元素。
优点：应用体积更小。
缺点：渲染性能差；跨端一致性可能受影响。
打包命令： flutter build web --web-renderer html

CanvasKit渲染模式

当canvaskit渲染模式：flutter将 Skia 编译成 WebAssembly 格式，并使用 WebGL 渲染。应用在移动和桌面端保持一致，有更好的性能，以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 2MB。
打包命令：flutter build web --web-renderer canvaskit
优点：像素级跨端一致性、更好的渲染性能。
缺点：应用体积变大，需要加载一个2.5MB的webaseembly格式的代码。

auto的渲染模式（默认）

会自动根据是运行在移动浏览器端还是桌面浏览器端来选择渲染模式。

实践遇到的问题

命令1 flutter build web --release
使用该命令打包的工程，放置在http链接下的时候，无法显示 image的图片。
目前发现比较好用的是这个：

flutter build web --release  --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/  --web-renderer canvaskit 

其中中间那段是将 canvaskit 使用本地的，节约整体下载的时间。

参考链接： https://blog.csdn.net/LucasXu01/article/details/125475627
https://zhuanlan.zhihu.com/p/511181734

3. flutter运行命令

运行到web端的命令：

flutter run -d chrome --web-port=8080