哥哥带你看Flutter Web Beta的发布对于大前端来说意

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端不具备的功能的应用。