在 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
1、首先要保证 Flutter 版本是在 Flutter 1.9 或以上
可以通过 Flutter --version 来查看

2、使用 master channel 来进行 Web 开发
通过 flutter channel master命令切换到 master 渠道上,当然默认就是 master 的,可以不用切换。

3、开启 Web 支持
通过 flutter config --enable-web 开启 web 支持。

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

4、初始化一个 futter web 项目
通过 flutter create . 命令来初始化一个 flutter web 项目。

5、web 项目运行
通过 flutte run -d chrome 来运行项目。运行之后会自动打开 chrome 浏览器查看效果。


用 Android Studio 打开这个项目之后,可以发现已经有 Chrome 这个运行选项了。

6、生成 release 产物
Release 构建产物使用 dart2js(不是 dartdevc)生成了一个单独的 JavaScript 文件。可以通过带有 release 标志的运行命令或是 flutter build web 来构建。输出文件在 build/web 目录下,包括需要一起提供的 assets 资源文件。因为 debug 构建可能包含数千个小文件,所以这里不支持 debug 构建。

7、注意
- 虽然 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 编程开发」微信公众号 获取更多技术分享。
