MacOS下搭建Flutter开发环境
Jacob Chen Lv3
 2019-06-11 11:22:05  

1. 配置 Flutter 中国镜像

在搭建 Flutter 环境之前，因为众所周知的原因，有可能被墙，所以需要先为 Flutter 配置中国镜像。

中国镜像地址

国内有两个镜像可以用，一个就是官方 Flutter 社区的国内镜像，另一个是上海交通大学 Linux 用户组的镜像，建议用官方 Flutter 社区的国内镜像。

配置方法

需要设置两个环境变量：PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL。

在 ~/.bash_profile 里添加：

1
2
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

保存文件后，再运行

1
source ~/.bash_profile

2. 安装 Android 开发环境

为了 Flutter 可以编译成 Android APK，和运行在 Android 模拟器上，需要搭建 Android 开发环境。安装 Android Studio，安装成功后，会自带 Android SDK。Androdi Studio 的下载地址有三个，选一个可以下载的地址：

配置 Android SDK 环境变量

打开 Android Studio，选择 Confiure -> ‘SDK Manager’：

在打开的窗口中就能看到 Android SDK 的路径:

在 ~/.bash_profile 里添加：

1
2
export ANDROID_HOME=/Users/****/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

保存文件后，再运行

1
source ~/.bash_profile
创建 Android 模拟器

打开 Android Studio，选择 Confiure -> ‘AVD Manager’：

在打开的页面里点击 Create Virtual Device…：

在 Phone 里选择一个设备，这里选择 Pixel 2 XL：

然后一直点击 Next，就成功创建了 Android 模拟器。

3. 安装 iOS 开发环境

为了 Flutter 可以编译成 iOS 安装包，和运行在 iOS 模拟器上，需要搭建 iOS 开发环境。
直接安装Xcode即可

4. Flutter SDK

下载 Flutter SDK
  1. 你可以在 Flutter SDK 的下载页面，选择你想要的版本，一般选择稳定版的，最新的稳定版是 v1.5.4-hotfix.2。
  2. 选一个路径来存放 Flutter SDK ，例如 /Users/jacob/sdk， 在这个位置下解压缩 Flutter SDK 的 zip 包：
1
2
cd /Users/jacob/sdk
unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip
设置 Flutter SDK 的环境变量

在 ~/.bash_profile 里添加：

1
2
export FLUTTER_HOME=/Users/jacob/sdk
export PATH=$PATH:$FLUTTER_HOME/bin

保存文件后，再运行

1
source ~/.bash_profile
运行 flutter doctor

为了验证 Flutter 是否安装成功，运行：

1
flutter doctor

看到输出如下的结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale
    zh-Hans-CN)
 
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.2)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
[!] Android Studio (version 3.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.35.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

说明，Flutter SDK 已经安装成功。但是也可以看到 flutter 的报错，请按照报错的提示修复，例如：

  1. Android toolchain - develop for Android devices（Android证书的问题）
    运行脚本修复即可

    1
    flutter doctor --android-licenses

  2. iOS toolchain - develop for iOS devices（iOS的问题）

1
2
3
4
5
6
7
8
9
10
[!] iOS toolchain - develop for iOS devices (Xcode 10.2)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy

这里列出了出现的问题，并且给出了解决方案，需要你按照提示运行相应的命令

  1. Android Studio
1
2
3
[!] Android Studio (version 3.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

Android Studio未下载Flutter和Dart插件。
打开Android Studio，选择Confiure -> 'Plugins'：

然后搜索下载Flutter和Dart

  1. VS Code
1
2
3
[!] VS Code (version 1.35.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

VS Code未下载Flutter环境
打开VS Code搜索下载Flutter即可

  1. Connected device
1
2
[!] Connected device
    ! No devices available

启动一下Xcode中的模拟器即可

5. Flutter IDE

Android Studio

我们知道Android Studio是用来开发Android的，但是也可以开发Flutter。
前面的步骤中已经安装了Android Studio，并且已下载相关插件Flutter和Dart，

打开Android Studio后，可以看到Start a new Flutter project

VS Code

VS Code 是一个轻量级编辑器，支持 Flutter 的开发。

  1. 安装VS Code 最新稳定版

  2. 安装Flutter插件

    • 打开VS Code。
    • 快捷键Shift+cmd+P(MacOS)打开命令面板
    • 输入install, 选择Extensions: Install Extensions，如下图：

    • 在Extensions的搜索框里输入Flutter,如下图：

    • 选择Flutter并点击Install，我这边已经下载过了，所以是Uninstall
    • 安装完后，重启VS Code
    • 快捷键Shift+cmd+P(MacOS)打开命令面板，输入Flutter，如果看到如下图的Flutter命令，说明安装成功