Flutter Web 之 Hello World

4,288 阅读2分钟

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