Flutter Web 之 Hello World

在 2019 Google 开发者大会上，官方宣布了 Flutter Web 合并到了 Flutter SDK 中，也意味着同一套代码正式的实现了跨平台开发。

主要命令：

flutter channel master
 flutter upgrade
 flutter config --enable-web
 cd <into project directory>
 flutter create .
 flutter run -d chrome
复制代码

一、首先要保证 Flutter 版本是在 Flutter 1.9 或以上

能够经过 Flutter --version 来查看

二、使用 master channel 来进行 Web 开发

经过 flutter channel master命令切换到 master 渠道上，固然默认就是 master 的，能够不用切换。

三、开启 Web 支持

经过 flutter config --enable-web 开启 web 支持。

一旦开启了 Web 支持，运行 flutter devices 就能看到 chrome 设备信息。

四、初始化一个 futter web 项目

经过 flutter create . 命令来初始化一个 flutter web 项目。

五、web 项目运行

经过 flutte run -d chrome 来运行项目。运行以后会自动打开 chrome 浏览器查看效果。

用 Android Studio 打开这个项目以后，能够发现已经有 Chrome 这个运行选项了。

六、生成 release 产物

Release 构建产物使用 dart2js（不是 dartdevc）生成了一个单独的 JavaScript 文件。能够经过带有 release 标志的运行命令或是 flutter build web 来构建。输出文件在 build/web 目录下，包括须要一块儿提供的 assets 资源文件。由于 debug 构建可能包含数千个小文件，因此这里不支持 debug 构建。

七、注意

• 虽然 Web 支持已经被添加到主仓库，可是还缺乏一些特性，且存在已知的性能问题。 所以不建议将 Web 应用部署到生产环境中。
• Flutter Web 应用不支持热重载。
• 浏览器终端刷新按钮不会刷新应用，可是能够在执行 “flutter run -d chrome” 的控制台中输入“R” 进行刷新。
• Web 应用是不支持文件系统访问的，所以没法使用 dart:io 这个包。
• Web 应用支持后退按钮，前进按钮目前不支持。
• HTTP 请求适用于移动设备，但不适用于网络。 Web 应用程序有特殊的安全限制。若是你遇到问题，请检查正在访问的 Web 服务器是否设置了接受来自托管 Flutter 应用程序的域的请求的 CORS 标头。

参考：

https://flutter.cn/docs/get-started/web
https://flutter.cn/docs/development/platform-integration/web
复制代码

最后

欢迎关注「Flutter 编程开发」微信公众号 获取更多技术分享。