Flutter 安装配置

概述

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

安装

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

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

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

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

XCode 设置

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

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

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

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

简单示例

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

打开一个仿真器

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

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

创建项目

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

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

设置编辑器

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

安装 Flutter 插件

图：这个是图片说明

运行代码

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

图：这个是图片说明

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

图：这个是图片说明

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

图：这个是图片说明

其他

CocoaPods out of date

有人用这种方式解决的：

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