在 2019 Google 开发者大会上，Flutter 1.9正式发布，官方宣布了 Flutter Web 合并到了 Flutter SDK 中，最近官方团队宣布Flutter Web支持已经迭代至Beta版本，也意味着Flutter Web已经越来越成熟，我们以后可以真正做到一套代码打包android/ios/web/桌面(mac,windows,linux)。下面我们看看如何开启Flutter的web之旅。
系统环境要求
基本要求：保证本地Flutter运行环境已经搭建完成，可以正常运行flutter应用，还没有搭建环境的请参考我另一片文章《Flutter入门之Mac最详环境搭建》。
Sept 1.保证自己用的Flutter版本是1.9以上
通过flutter –version来查看当前使用的Flutter版本。
有的同学flutter版本可能低于1.9，就需要升级一下flutter的版本，这里有两种方式，一种是用flutter upgrade命令，另一种就是去官网下载最新的flutter SDK，个人建议用flutter upgrade命令，方便快捷。
Step 2.将Flutter切换到master分支
因为flutter Web被合并到了master分支，所以使用Flutter Web功能需要在master分支，先用flutter channel看一下你的当前环境在哪个分支
我当前在stable分支，所以需要用flutter channel master将flutter切到master分支，切完之后再用flutter channel命令看一下当前分支，如果在master分支，就可以进行下一步
Step 3.开启Flutter的web支持开关
通过 flutter config --enable-web 开启 web 支持
开启了web支持可以执行flutter devices命令，就能看到可以运行flutter Web的设备信息，貌似当前只能在chrome里打开。
这里需要注意的是，如果你当前flutter的分支不是master，而是其他分支，比如stable分支，就算开启了Web支持，继续运行flutter devices会显示没有发现设备。因为不再master分支上，运行web开启命令是不生效的。所以运行flutter devices命令能发现设备的前提是Flutter SDK在master分支，同时开启了web支持。
Step 4.初始化一个 Flutter web 项目
可以用官方提供的flutter create . 命令来初始化一个 flutter web 项目。这里需要注意的是建立存放flutter web 项目的目录名时需要注意，官方有要求的命名规则
按照命名规则建好目录后，进入目录下执行flutter create .
创建好的项目结构如下(树形的太长了，放个简单的吧)
Step 5.运行Flutter web项目
运行flutter run -d chrome命令可以在chrome浏览器里打开当前flutter web项目的页面。
虽然页面是打开了，不过这个页面性能还是有待提高，所以Flutter Web目前只是一个尝试，还是不能用于线上业务的,但是感觉可以用来做Flutter降级方案。
使用flutter run -d chrome命令启动Flutter Web项目时还需要注意的是本地需要配host:127.0.0.1 localhost，否则项目无法正常启动。
Step 6.打包生成Flutter Web release包
运行flutter build web命令，可以生成release包。因为debug构建出的包可能包含数千个小文件，性能较差，所以不支持debug模式构建
其原理是使用 dart2js将Dart文件转换成 javaScript 文件。最终release包输出文件在 build/web 目录下，包括需要一起提供的 assets 资源文件,生成的release目录如下：
注意事项
- 虽然 Web 支持已经被添加到主仓库，但是还缺少一些特性，且存在已知的性能问题。 因此不建议将 Web 应用部署到生产环境中。
- Flutter Web 应用不支持热重载。
- 浏览器终端刷新按钮不会刷新应用，但是可以在执行 “flutter run -d chrome” 的控制台中输入“R” 进行刷新。
- Web 应用是不支持文件系统访问的，因此无法使用 dart:io 这个包。
- Web 应用支持后退按钮，前进按钮目前不支持。
- HTTP 请求适用于移动设备，但不适用于网络。 Web 应用程序有特殊的安全限制。如果你遇到问题，请检查正在访问的 Web 服务器是否设置了接受来自托管 Flutter 应用程序的域的请求的 CORS 标头。
写在最后
Flutter Web正在向稳定版迈进，一个完善的生态离不开开发者的支持，Flutter 插件的数量已突破 1,800 个，但是其中大部分仅提供 iOS 或 Android 支持，广大前端开发者联合起来，我们可以用自己的力量缩小 web 与移动平台之间的距离。 可以通过《Flutter web 插件开发指南》进一步了解技术细节与开发方法。
