Flutter Web架构 :
要使Flutter运行于Web之上,需要解决三个主要问题:1. 编译Dart为JavaScript 2. 选择可运行于Web之上的功能,剔除与特定平台相关的模块 3. 选择合适的Web特性来实现Flutter的功能。为此,Flutter项目组实现了三种原型:纯组件层(widgets)、组件加自定义布局(Widgets + custom layout),以及构建全新的底层Web引擎。诸多尝试后,Flutter项目组发现只有第三种方式才能够保证真正跨平台,即为Flutter实现一个全新的Web引擎。
web框架层和mobile的几乎一模一样。因此只需要重新实现一下引擎和嵌入层,不用变动Flutter API就可以完全可以将UI代码从Android / IOS Flutter App移植到Web。Dart能够使用Dart2Js编译器把Dart代码编译成Js代码。大多数原生App元素能够通过DOM实现,DOM实现不了的元素可以通过Canvas来实现。
废话不多说,直接上步骤:
一,安装:
1,更新flutter需要1.5.4以上的版本:flutter channel master && flutter upgrade
2,检查版本:flutter doctor
3,把.pub-cache/bin加入PATH中比如:
windows:
C:\Users\<your-username>\AppData\Roaming\Pub\Cache\bin
mac或linux
$FLUTTER_HOME/.pub-cache/bin
4,安装webdev
$ flutter pub global activate webdev
webdev --help
二,运行已有项目:
谷歌已经把gallery示例运行到web上,可以看到效果还是很惊人的,后面有资料有链接可以详细参考。下面运行galllery步骤:
把代码下载下来https://github.com/flutter/flutter_web.git
进入到仓库的gallery目录
cd examples/hello_world/
更新包
flutter pub upgrade
本地运行
webdev serve
如果提示webdev需要升级,可以再次执行下面的命令即可:
flutter pub global activate webdev
三,其他:
Flutter Web应用可以调用所有已有的Dart Web库,而且支持使用dart:js和package:js与JavaScript交互。
出于性能以及可移植性考虑,Flutter Web应用目前不支持直接使用CSS,即跟原生Flutter一样,全部使用组件代码来实现样式。
Flutter Web应用暂不支持嵌入到其他Web应用中,但可能会使用iframe或Shadow Dom方式实现。
其他Web组件如:html自定义标签、React组件、Angular组件等,都还不能嵌入Flutter Web应用中。主要问题是这些组件会引入CSS,可能带来不可预知的影响,项目组还在研究应对方案。
Flutter Web版将保证最大的可移植性,但并不意味所有Flutter应用都不用修改就能运行于Web之上,比如:使用了ARCore等Web端不具备的功能的应用。