Set up web development for Flutter from Android on macOS start

To add Web as a Flutter app target for macOS with Android, follow this procedure.

Configure Chrome as the web DevTools tools

#
  1. Allocate a minimum of 1 GB of storage for Google Chrome. Consider allocating 2 GB of storage for an optimal configuration.

  2. Download and install the macOS version of Google Chrome to debug JavaScript code for web apps.

检查你的开发配置

#

help 帮助

运行 Flutter doctor

#

flutter doctor 指令将检查 macOS 完整的 Flutter 开发环境的所有组件。

  1. Open 你的 Terminal.

    打开你的 Terminal。

  2. 要检查所有组件的安装情况,请运行以下指令。

    flutter doctor

由于你选择为 Web 进行开发,因此不需要 所有 组件。如果你遵循本指南,指令结果应该类似于:

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.3, on macOS 14.4.0 23E214 darwin-arm64, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[✓] Chrome - develop for the web
[✓] Xcode - develop for iOS and macOS (Xcode 15)
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.93)
[✓] Connected device (1 available)
[✓] Network resources


∙ No issues found!

解决 Flutter doctor 的问题

#

flutter doctor 指令返回错误时,可能是 Flutter、VS Code、Xcode、连接的设备或者网络资源出错。

如果 flutter doctor 指令返回这些组件中的任何一个错误,请使用 verbose 标志再次运行。

flutter doctor -v

查看输出结果,了解可能需要安装的其他软件或者需要执行的其他任务。

如果你更改了 Flutter SDK 或其他相关组件的配置,请 再次运行 flutter doctor 来检查安装。

开始使用 Flutter 开发 Web on macOS 应用

#

恭喜你。 在安装完成所有必要条件和 Flutter SDK 后,你就可以开始开发适用于 Web on macOS 的 Flutter 应用了。

如果你要继续学习之旅,请参考以下指南: