macOS上搭建Flutter开发环境

我不是女神ヾ 2022-04-11 08:54 332阅读 0赞

### 一、准备 ###

#### 1. 使用镜像 ####

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

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

注意： 此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

#### 1.2 系统要求 ####

要安装并运行Flutter，您的开发环境必须满足以下最低要求:

*  操作系统: macOS (64-bit)
 *  磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.
 *  工具: Flutter 依赖下面这些命令行工具.  
    bash, mkdir, rm, git, curl, unzip, which

### 二、设置环境变量 ###

#### 2.1 下载SDK ####

去flutter官网下载其最新可用的安装包，[转到下载页][Link 1] 。

注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，读者也可以去Flutter github项目下去下载安装包，[转到下载页][Link 2] 。

#### 2.2 解压SDK ####

解压安装包到你想安装的目录，如：

cd ~/MyLibrarys
    unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip

#### 2.3 设置环境变量 ####

运行`vi ~/.bash_profile`，编辑如下：

export FLUTTER_HOME=/Users/用户名/MyLibrary/flutter
    export PATH=$FLUTTER_HOME/bin:$PATH

保存，退出即可。

#### 2.4 更新环境变量 ####

执行`source ~/.bash_profile`刷新环境变量，使刚才设置的flutter生效。

#### 2.5 运行flutter doctor ####

运行以下命令查看是否需要安装其它依赖项来完成安装：

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）。

第一次运行一个flutter命令（如`flutter doctor`）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

执行结果如下：

Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.4 17E202, locale zh-Hans-CN)
    [!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
        ✗ Android license status unknown.
    [!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
        ✗ 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 with Brew:
            brew install ios-deploy
        ✗ CocoaPods not installed.
            CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
            Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
            For more info, see https://flutter.io/platform-plugins
          To install:
            brew install cocoapods
            pod setup
    [✓] Android Studio (version 3.1)
        ✗ Flutter plugin not installed; this adds Flutter specific functionality.
        ✗ Dart plugin not installed; this adds Dart specific functionality.
    [!] IntelliJ IDEA Ultimate Edition (version 2016.3.5)
        ✗ Flutter plugin not installed; this adds Flutter specific functionality.
        ✗ Dart plugin not installed; this adds Dart specific functionality.
        ✗ This install is older than the minimum recommended version of 2017.1.0.
    [✓] Connected device (1 available)
    
    ! Doctor found issues in 3 categories.

此处，报了三个要解决的问题，本文以`Android`为例，使用`Android Studio`开发，所以`[!] IntelliJ IDEA Ultimate Edition (version 2016.3.5)`这个就可以先忽略了，那么先来解决Android的问题。

*  Android Studio 安装Flutter和Dart插件
 *  添加Android license，[点我前往查看如何添加][Link 3]

一般的错误会是xcode或Android Studio版本太低、或者没有ANDROID\_HOME环境变量等，请按照提示解决。下面贴一个笔者本机(mac)的环境变量配置，您可以对比修正：

export PATH=${PATH}:/Applications/xampp/xamppfiles/bin
    export ANDROID_HOME=/Users/用户名/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools
    
    export GRADLE_HOME=/Applications/Android\ Studio.app/Contents/gradle/gradle-4.4
    export PATH=$PATH:$GRADLE_HOME/bin
    
    export NODE_HOME=/Applications/node-v6.10.9
    export PATH=$PATH:$NODE_HOME/bin
    
    export PATH=/Users/用户名/Android/android-ndk-r16b:$PATH
    export WORKON_HOME=~/.virtualenvs
    source /Library/Frameworks/Python.framework/Versions/3.6/bin/virtualenvwrapper.sh
    
    export PATH=${PATH}:/usr/local/mysql/bin
    
    export PUH_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    export FLUTTER_HOME=/Users/用户名/MyLibrary/flutter
    export PATH=$FLUTTER_HOME/bin:$PATH

一旦你安装了任何缺失的依赖，再次运行`flutter doctor`命令来验证你是否已经正确地设置了。

### 三、尾篇 ###

#### 3.1 小结 ####

至此，Flutter在Mac上开发环境就搭建完了，下篇将介绍如何在Mac上完成Android和iOS平台设置，以便能够构建并运行第一个Flutter应用程序。

[Link 1]: https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos
[Link 2]: https://github.com/flutter/flutter/releases
[Link 3]: https://blog.csdn.net/u010358168/article/details/84836002