前言

接触Flutter开发的时间并不长，最早关注到Flutter，就是听说它可以跨端开发iOS，Android，Web端。直到上周看了Flutter2.0的发布，才知道，原来跨web端才刚刚stable呀...

那我们来真实的体验一下，Flutter发布web应用究竟靠不靠谱？

开启web端构建

使用下面这个命令才可以开启Web端构建的支持

flutter config --enable-web

开启后我们再次输入flutter config可以看到

这样每次新建Flutter项目时，都是支持web端构建的，会默认多出一个构建配置目录web。

即使某个项目不需要支持web端构建也无须去特意关掉这个支持，不使用构建web的命令即可

其实就是对当前项目重新配置一下

flutter create .

在没有其他端环境可用的情况下，使用以下命令会直接编译web端并打开chrome进行调试

flutter run

Flutter在构建web端应用时，可以选择两种渲染模式。下面给大家演示下，大家注意仔细看看截图中我标记了红框的部分。

flutter build web --web-renderer html

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

优点：

缺点：

flutter build web --web-renderer canvaskit

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

优点：

缺点：

还有一个auto的渲染模式（默认），会自动根据是运行在移动浏览器端还是桌面浏览器端来选择渲染模式

随着Flutter2.0的发布，这个带着【全平台像素级跨端一致性的】框架会更加倍受关注。虽然Web端的编译结果无论哪种渲染方式暂时在国内的web体验标准下都还差点意思，但是真的很值得期待。

一个设计师出身，但热爱编程的老程序猿

近期文章（感谢掘友的鼓励与支持🌹🌹🌹）

本文正在参与「掘金 2021 春招闯关活动」, 点击查看活动详情