FluttersWeb概述
目前Flutter已经为web工程的开发提供稳定可靠的环境了,Flutter提供一个以应用为中心的框架用于构造强大的Web平台级应用。借助Dart的可移植性、web平台的强大功能和Flatter框架的灵活性,您现在可以从同一代码库为iOS、Android和浏览器构建应用程序。您可以将用Dart编写的现有Flutter工编译成web体验,因为它与颤振框架完全相同,web只是应用程序的另一个设备目标。
架构
架构
Brower
Fluttersweb在标准浏览器API之上实现Flutter的核心绘图层,以及将Dart编译为JavaScript。通过结合使用DOM、Canvas和WebAssembly,Flatter可以跨现代浏览器提供可移植、高质量和高性能的用户体验。Flutter实现在Dart中实现了核心绘图层,并使用Dart优化的JavaScript编译器将Flutter核心和框架以及应用程序编译成一个可部署到任何web服务器的单一、缩小的源文件。
HTML/CSS(略)
CanvasCanvas是H5的一部分,允许脚本语言动态渲染图像。Canvas定义一个区域,可以由html属性定义该区域的宽高,JavaScript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。
WebGL全称WebGraphicsLibrary,是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起,通过增加OpenGLES2.0的一个JavaScript绑定,WebGL可以为HTML5Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。
WebAssemlyWebAssembly(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层允许你定义你能重复使用的组合组件。同时,此层引入了响应式编程模型。
不同跨平台技术对比
应用场景
并非所有的Web应用都适用于Flutter作Web开发。Flutter适于用体验式的应用程序:
渐进式Web应用程序(PWA)Flutter提供与用户环境集成的高质量PWA,包括安装、离线支持和定制的用户体验。
单页面的Web应用Flattersweb支持复杂的独立web应用程序,这些应用程序包含丰富的图形和交互内容,可以在各种设备上与最终用户联系。
现有Flutter移动端的应用对Fluttersweb支持为现有Flutter移动应用程序提供了基于浏览器的交付模式。
Flutter不适用于基于内容的富文本的静态网站,例如:博客是以文档模型为中心的web应用,而flutter是以应用为中心的UI框架。当然我们可以使用flatter将交互体验嵌入到这些网站中。
浏览哭兼容性
Chrome(mobiledesktop)
Safari(mobiledesktop)
Edge(mobiledesktop)
Firefox(mobiledesktop)
FAQ
热加载
Flutter和其他Web框架一样,无法热加载。不过您可以使用热重启。热重启是一种快速查看更改的方法,无需重新启动web应用程序并等待其编译和加载。该功能类似Flutter移动开发的热重新加载功能。唯一的区别是热重新加载会记住您的状态,而热重新启动不会。
重启的方式即可以直接用项目调试页的浏览器中的刷新按钮,或者在启动控制台用"R"快捷键。
IDE
Flutter的开发可以在Androidstudio、Ideal或vscode上进行,需要安装插件。这些Ideal工具可以选择不同浏览器作为调试驱动,其中chrome是开发时的默认浏览器。
flutter的web项目插件
使用web筛选器在pub.dev上查找更新的插件列表。您还可以向现有插件添加web支持,或者为web编写自己的插件。