最近谷歌搞了一件大事情,Flutter也可以写Web应用了,去年我用Dart写了一下Web,请看视频介绍Dart开发前端页面入门系列视频(1),体验了一把Dart写Web的感觉。现在谷歌把dart:ui重写了一遍,让Flutter也可以轻松实现Web网页功能,废话少说。本文详细介绍
Flutter for Web
,让各位了解一下它是何方神圣。不管你有没有做过Web开发都可以快速学习和掌握这个新鲜玩意儿。
Flutter for Web
官方的Github库地址:https://github.com/flutter/flutter_web ,此存储库包含面向Web 的 Flutter 分支的源代码 。Flutter团队的目标是把Web与iOS和Android一起添加到Flutter SDK中的第一层平台。此存储库中的代码提供实现(几乎)整个Flutter API的纯Web包。
Flutter for Web
是Flutter的代码兼容实现,使用基于标准的Web技术呈现:HTML
,CSS
和JavaScript
。使用Flutter for web
,您可以将使用Dart编写的现有Flutter代码编译成可以嵌入浏览器并部署到任何Web服务器的客户端体验。您可以使用Flutter的所有功能,而不需要浏览器插件。
Flutter for web
目前只是预览版,旨在验证产品是否满足开发人员的需求。目前只支持Chrome浏览器上调试页面。
Flutter for Web架构图
Flutter框架(上图中的绿色部分)在移动和网络产品之间共享。它为Flutter的UI基础提供高级抽象概念,包括动画,手势,基本小部件类,以及面向最常见应用程序需求的Material主题的小部件。如果您已经使用过Flutter构建项目,那么您将可以快速体验到Flutter for Web
的功能。
Flutter for Web
的神奇之处在于将Flutter UI的概念转移到浏览器中。与Flutter移动端框架不一样的是,Flutter for Web
的第一层(橙色的)是Browser,里面有Cabvas、JS Engine和DOM。Flutter团队重新实现了dart:ui
库,用针对DOM和Canvas的代码替换了手机端使用的对Skia引擎的绑定。Browser
这一层核心绘图层完全是用Dart实现的,并使用Dart优化的JavaScript编译器将Flutter核心和框架与应用程序一起编译成一个可以部署到任何Web服务器的简化的源JavaScript文件,可以在任何现代浏览器上运行。
dart2js: 为了部署环境而生成优化的精简的代码。使用dart2js工具将Dart代码编译为可部署的JavaScript。
dartdevc: 它提供渐进式编译和热启动。你可以编辑Dart文件,在Chrome中刷新,并立即查看文件修改后的结果。dartdevc只编译更新的模块,而不是编译应用所依赖的所有软件包。
flutter_web
目前还没有插件系统。暂时提供dart:html
,dart:js
,dart:svg
, dart:indexed_db
这些让你和其他网络库能够访问的绝大多数浏览器的API。对于位置,相机和文件访问等功能,Flutter团队希望通过单一API桥接移动和网络。Flutter for web
目前还是预览版,生成的代码可能运行缓慢。flutter_web
即使在桌面浏览器上运行,构建的用户界面也可能像移动应用程序一样。