前言

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

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

开启web端构建

使用下面这个命令才能够开启Web端构建的支持java

flutter config --enable-web
复制代码

开启后咱们再次输入flutter config能够看到web

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

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

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

flutter create .
复制代码

在没有其余端环境可用的状况下，使用如下命令会直接编译web端并打开chrome进行调试浏览器

flutter run
复制代码

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

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 春招闯关活动」, 点击查看活动详情