Flutter for Web在2022 年

Flutter是谷歌的跨平台UI框架，旨在帮助开发人员创建更接近本地、高性能、更具吸引力的移动应用程序。然而，Flutter的目标是为每个设备窗口创建用户界面，而不仅仅是在移动应用程序中。

Flutter为Web的支持提供了与移动终端相同的开发体验，这得益于便捷的Dart、强大的Web平台生态和Flutter框架的灵活扩展。现在开发者可以直接创建iOS和Android以外的Web应用程序。

对于Web来说，它使用与iOS和Android相同的Flutter框架，Web只是开发者项目中可以支持的框架之一，所以一般来说，您可以直接将Dart编写的原始Flutter项目编译成Web体验。

在这里，我们将分析Flutterweb(与React、Angular、Vue等SPA框架的对比)、桌面(与Electron、Qt对比)的当前状态，并希望在未来通过一些额外的努力实现嵌入式设备的兼容性。

它是怎么工作的？

Flutter(Mobile)拥有自己的渲染引擎Skia，为FlutterSDK提供了完全控制屏幕上每个像素的能力，精度和速度都很高。

Flutter在Web上构建HTML组件，并将整个屏幕用作画布，以完全控制每个像素。它是由HTML/CSS和Javascript创建的，它们都是主流的Web技术。因此，Flutter可以在Web上使用Flutter的所有功能，如动画和路由，而无需编写任何额外的代码来适应。

目前，Flutter与Web兼容，包括在传统浏览器API上构建Flutter的基本图形层，并将Dart编译成JavaScript，而不是将DOM、Canvas和Webasembly与移动应用中使用的ARM机器代码相结合，Flutter可以在不同的浏览器上提供高质量和高性能的用户体验。

重要细节：优缺点。

Flutter是否是另一个试图减少Reacts和Angulars在Web市场的框架？

让我们来看看FlutterWeb带来了什么，并通过它的缺点来思考。

优点：

FlutterforrMobile基本相同的控件。

几乎所有著名的库都支持在移动和Web上运行。

60.04%pub.dev包与Web兼容。

开发三个平台的时间明显减少。

定制：Flutter还根据操作系统为Web开发定制版本——就像它为Android和iOS所做的一样。

这是否意味着FlutterWeb及其优势将成为构建跨平台应用(包括Web端)的理想工具？

Flutterweb也有一些严重的缺点：

FlutterWeb的SEO能力支持不友好。

HTML、CSS和JavaScript代码无法修改。

Flutterweb对SEO不友好，缺乏SEO也是其越来越难用于大型商业产品的原因之一。

性能和渲染

Flutter为开发者提供了两种可选的渲染器：

HTML渲染。

Canvaskit。

HTML渲染器优化了下载尺寸而不是原始性能。

Canvaskit优先考虑性能与像素的完美一致性，但会影响下载尺寸，使您的应用程序首先运行速度有点慢。同时，Canvaskit呈现的总文件尺寸比原文件增加了400%以上，但性能也突飞猛进。