Flutter's Web 概述与架构图
应用场景与浏览器兼容性
更我FAQ
- 热加载
- IDE
- 插件
- 调试与发布
- 国际化

Flutter's Web 概述

目前Flutter已经为web工程的开发提供稳定可靠的环境了，Flutter提供一个以应用为中心的框架用于构造强大的Web平台级应用。借助Dart的可移植性、web平台的强大功能和Flatter框架的灵活性，您现在可以从同一代码库为iOS、Android和浏览器构建应用程序。您可以将用Dart编写的现有Flutter工编译成web体验，因为它与颤振框架完全相同，web只是应用程序的另一个设备目标。

架构

Brower

Flutter's web在标准浏览器API之上实现Flutter的核心绘图层，以及将Dart编译为JavaScript。通过结合使用DOM、Canvas和WebAssembly，Flatter可以跨现代浏览器提供可移植、高质量和高性能的用户体验。Flutter实现在Dart中实现了核心绘图层，并使用Dart优化的JavaScript编译器将Flutter核心和框架以及应用程序编译成一个可部署到任何web服务器的单一、缩小的源文件。

HTML/CSS (略）
Canvas
Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas定义一个区域，可以由html属性定义该区域的宽高，JavaScript代码可以访问该区域，通过一整套完整的绘图功能（API），在网页上渲染动态效果图。
WebGL
全称Web Graphics Library，是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
WebAssemly
WebAssembly（wasm）就是一个可移植、体积小、加载快并且兼容 Web 的全新格式。

Framework

基础模块（foundational）及基础服务:
animation，painting，以及gestures，这三种基础服务是为了方便上层调用对基础模块的抽象。
Rendering 层：为处理图层提供了抽象组件。通过这一层，我们构建一棵可绘制对象的树，且可动态操作这些对象。
Widgets层：是组件的抽象，此层引入了响应式编程模型。每个render对象都有对应的widget对象。widgets层允许你定义你能重复使用的组合组件。
Material和Cupertino库提供了一系列Material和iOS设计风格的组件。

基础模块（foundational）及基础服务，例如animation，painting，以及gestures，这三种基础服务是为了方便上层调用对基础模块的抽象。
Rendering 层，为处理图层提供了抽象组件。通过这一层，你能构建一棵可绘制对象的树。你可以动态操作这些对象，这棵树可以根据你的修改自动更新这棵树。
Widgets层，是组件的抽象。每个render对象都有对应的widget对象。除此之外，widgets层允许你定义你能重复使用的组合组件。同时，此层引入了响应式编程模型。
Material和Cupertino库提供了一系列Material和iOS设计风格的组件。

不同跨平台技术对比

应用场景

并非所有的Web应用都适用于Flutter作Web开发。Flutter适于用体验式的应用程序：

渐进式Web应用程序（PWA）
Flutter提供与用户环境集成的高质量PWA，包括安装、离线支持和定制的用户体验。
单页面的Web应用
Flatter's web 支持复杂的独立web应用程序，这些应用程序包含丰富的图形和交互内容，可以在各种设备上与最终用户联系。
现有Flutter移动端的应用
对Flutter's web支持为现有Flutter移动应用程序提供了基于浏览器的交付模式。

Flutter不适用于基于内容的富文本的静态网站，例如：博客是以文档模型为中心的web应用，而flutter是以应用为中心的UI框架。当然我们可以使用flatter将交互体验嵌入到这些网站中。

浏览哭兼容性

Chrome (mobile & desktop)
Safari (mobile & desktop)
Edge (mobile & desktop)
Firefox (mobile & desktop)

FAQ

热加载

Flutter和其他Web框架一样，无法热加载。不过您可以使用热重启。热重启是一种快速查看更改的方法，无需重新启动web应用程序并等待其编译和加载。该功能类似Flutter移动开发的热重新加载功能。唯一的区别是热重新加载会记住您的状态，而热重新启动不会。

重启的方式即可以直接用项目调试页的浏览器中的刷新按扭，或者在启动控制台用"R"快捷键。

IDE

Flutter的开发可以在Android studio、Ideal或vs code上进行，需要安装插件。这些Ideal工具可以选择不同浏览器作为调试驱动，其中chrome是开发时的默认浏览器。

flutter的web项目插件

使用web筛选器在pub.dev上查找更新的插件列表。您还可以向现有插件添加web支持，或者为web编写自己的插件。

注意： dart:io无法在web项目中使用

flutter's web项目调试与发布

Flutter DevTools 主要提供如下功能：
- 调试
- 日志输出
- Flutter项目检测
Chrome DevTools提供如下功能:
- Generating event timeline
- 性能分析

flutter's web项目调试

部件测试
集成测试

项目发布

项目发布: https://flutter.dev/docs/deployment/web

参考

https://flutter.dev/web
https://flutter.dev/docs/development/platform-integration/web

Flutter's Web 介绍