Flutter 开启web构建以及web的两种渲染模式

旧项目开启web端构建

flutter config --enable-web
1

在项目路径下执行（其实就是对当前项目重新配置一下）：

flutter create .
1

通过：

flutter config
1

可以看到目前支持的终端：

Settings:
  enable-macos-desktop: true
  enable-web: true

1
2
3
4

渲染模式

HTML渲染模式

html渲染模式：flutter会采用HTML的custom element，CSS，Canvas和SVG来渲染UI元素

优点：

• 应用体积更小

缺点：

• 渲染性能差
• 跨端一致性可能受影响

flutter build web --web-renderer html
1

CanvasKit渲染模式

当canvaskit渲染模式：flutter将 Skia 编译成 WebAssembly 格式，并使用 WebGL 渲染。应用在移动和桌面端保持一致，有更好的性能，以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 2MB。

flutter build web --web-renderer canvaskit
1

优点：

• 像素级跨端一致性
• 更好的渲染性能

缺点：

• 应用体积变大，需要加载一个2.5MB的webaseembly格式的代码

auto的渲染模式（默认）

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