Flutter Web架构 ：
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端不具备的功能的应用。
网友评论