概述

本文介绍的是在 Mac M1 下安装 Flutter 的流程,以及在安装过程中遇到的问题。对于遇到的问题,我尽可能给出解释,并且提供我的解决方案。

安装

环境介绍,首先我的 Mac M1 上已经安装过了 git 和 XCode。

  1. [root@liqiang.io]# git version
  2. git version 2.37.1 (Apple Git-137.1)

安装的话,主要还是 Follow 官方的安装指导,所以过程直接用使用的命令代替:

  1. [root@liqiang.io]# sudo softwareupdate --install-rosetta --agree-to-license
  2. [root@liqiang.io]# wget https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.7.10-stable.zip
  3. [root@liqiang.io]# mkdir ~/development && cd ~/development
  4. [root@liqiang.io]# unzip ~/Downloads/flutter_macos_arm64_3.7.10-stable.zip
  5. [root@liqiang.io]# flutter doctor
  6. Doctor summary (to see all details, run flutter doctor -v):
  7. [✓] Flutter (Channel stable, 3.7.10, on macOS 13.1 22C65 darwin-arm64, locale en-SG)
  8. [✗] Android toolchain - develop for Android devices
  9. Unable to locate Android SDK.
  10. Install Android Studio from: https://developer.android.com/studio/index.html
  11. On first launch it will assist you in installing the Android SDK components.
  12. (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
  13. If the Android SDK has been installed to a custom location, please use
  14. `flutter config --android-sdk` to update to that location.
  15. [!] Xcode - develop for iOS and macOS
  16. Xcode installation is incomplete; a full installation is necessary for iOS development.
  17. Download at: https://developer.apple.com/xcode/download/
  18. Or install Xcode via the App Store.
  19. Once installed, run:
  20. sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  21. sudo xcodebuild -runFirstLaunch
  22. [✓] Chrome - develop for the web
  23. [!] Android Studio (not installed)
  24. [✓] VS Code (version 1.76.2)
  25. [✓] Connected device (2 available)
  26. [✓] HTTP Host Availability
  27. ! Doctor found issues in 3 categories.

XCode 设置

  1. [root@liqiang.io]# sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  2. [root@liqiang.io]# sudo xcodebuild -runFirstLaunch
  3. [root@liqiang.io]# sudo xcodebuild -license

执行完这三条命令之后,最后一条命令你需要输入 agree 表示同意协议。执行完之后,再次用 flutter doctor 检测一下,就可以发现一切正常了:

  1. [root@liqiang.io]# flutter doctor
  2. Doctor summary (to see all details, run flutter doctor -v):
  3. [✓] Flutter (Channel stable, 3.7.10, on macOS 13.1 22C65 darwin-arm64, locale en-SG)
  4. [✗] Android toolchain - develop for Android devices
  5. Unable to locate Android SDK.
  6. Install Android Studio from: https://developer.android.com/studio/index.html
  7. On first launch it will assist you in installing the Android SDK components.
  8. (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
  9. If the Android SDK has been installed to a custom location, please use
  10. `flutter config --android-sdk` to update to that location.
  11. [✓] Xcode - develop for iOS and macOS (Xcode 14.3)
  12. [✓] Chrome - develop for the web
  13. [!] Android Studio (not installed)
  14. [✓] VS Code (version 1.76.2)
  15. [✓] Connected device (2 available)
  16. [✓] HTTP Host Availability
  17. ! Doctor found issues in 2 categories

剩下的 Android 问题因为当前还用不到,所以就可以忽略了。

简单示例

下一步,创建一个简单的示例确认一下安装是没问题的,这里我决定尝试一下 iOS 的 Demo 看看效果。

打开一个仿真器

  1. [root@liqiang.io]# open -a Simulator

这个其实不要也行,你插入你的 iPhone 也可以,但是我嫌弃还得去找线,就选择用仿真器了。

创建项目

  1. [root@liqiang.io]# flutter create my_app
  2. [root@liqiang.io]# cd my_app
  3. [root@liqiang.io]# flutter run

这样,Flutter 的一个简单 Demo 应用就运行在你的 iPhone 或者仿真器上了,这说明一切都工作正常了。

设置编辑器

有了代码之后,下一步就是设置一个 IDE 来编辑项目中的代码。因为我已经开始习惯了 VSCode,所以我这里选用的是 VSCode 作为 Flutter 的 IDE。

安装 Flutter 插件

图 :这个是图片说明

运行代码

查看 VSCode 的右下方,你可以看到一个仿真器的选项:

图 :这个是图片说明

你可以选择你想要运行你代码的仿真器(例如 iPhone 或者 Mac 或者 Chrome 等等)。然后按下 “F5” 或者选择 “Run” —> “”,即可在目标仿真器上运行你的代码了:

图 :这个是图片说明

你将会看到调试代码的工具栏:

图 :这个是图片说明

其他

CocoaPods out of date

有人用这种方式解决的:

  1. [root@liqiang.io]# brew upgrade cocoapods
  2. [root@liqiang.io]# pod setup

有人用这种方式解决的:

  1. [root@liqiang.io]# sudo gem install cocoapods
  2. [root@liqiang.io]# pod setup