# Flutter初体验-安装

> 多端融合能力是现在大前端研究的技术风向标之一，当前 Flutter 风头正盛，它的设计之初就是为了解决移动端的当今的诸多问题。


Flutter 的设计的思想以及出发点不是本篇的重点，所以直奔主题，如何在 Mac 上安装 Flutter 的开发环境。

### 1. Homebrew

Homebrew 是 Mac 是安装各种软件包的一个工具，所以你需要先安装好 Homebrew。

```shell
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

### 2. 安装 Flutter SDK

#### 下载 SDK
SDK 下载方式有2种。一是使用 `git clone -b beta https://github.com/flutter/flutter.git` 下载，二是通过官网选择符合自己机器环境的文件。（实验后发现方式一特别慢，建议大家直接使用方式二）

![Flutter文件夹位置](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2019-08-13-FlutterDirectory.png)

下载好之后解压，安装到自己指定的位置。

#### 配置环境变量

Flutter 在运行的时候需要去官网下载一些需要的资源，所以需要设置镜像服务器。我使用的是 iterm2。所以打开 **.zshrc** 文件。如果使用的是系统的 Terminal，则需要打开 **.bash_profile**。

```shell
export PUB_HOSTED_URL=https://pub.flutter-io.cn  
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/liubinpeng/flutter/bin:$PATH
```
`/Users/liubinpeng` 是我电脑环境下的 Flutter 路径，这里改成你自己的路径。之后执行 `source .zshrc`。

验证 Flutter 环境是否成功。

```shell
flutter -h
```

### 3. 配置 Android studio

一般认为用户是 iOS 开发，电脑没有 Android 开发环境，首先去[官网](https://developer.android.google.cn/studio)下载。

然后通过 `flutter doctor` 来检查 flutter 的环境配置。一般可以看到多个 ✗ 。每个 ✗ 后面的描述内容都是我们需要解决的问题。

- 打开 Android studio。但是首次打开会报错，提示找不到 SDK。解决方案：在应用程序文件夹下面找到 Android studio，显示包内容。路径如下

`/Applications/Android\ Studio.app/Contents/bin/idea.properties`，用文本编辑器打开，在最下面添加如下代码

```shell
isable.android.first.run=true
```

- 设置 Android studio 的环境变量。
```shell
export ANDROID_HOME=~/Library/Android/sdk 
export PATH=${PATH}:${ANDROID_HOME}/emulator
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
```
分别是安卓 SDK 路径、安卓模拟器路径、安卓 tools 路径、安卓平台工具。

- 安装 Android studio Flutter 插件
接下来使用 flutter doctor 检查，显示信息

```shell
 ✗ Flutter plugin not installed; this adds Flutter specific functionality.
 ✗ Dart plugin not installed; this adds Dart specific functionality.
```
意思是缺少 Flutter 插件。步骤：Preferences -> Plugins -> 搜索栏输入 Flutter，找到第一个点击 install。此时会弹出对话框让你选择安装 Dart，点击 YES。之后重启 Android studio，看到在主界面会多出下图红色框的内容。至此我们可以创建 Flutter 工程了。

![Androidstudio](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2019-08-12-Flutter.png)

- 给 Android studio 设置模拟器

点击右上方区域一个类似手机的按钮，选择手机（Pixel 2）.下载对应的系统（pie）(需要开启翻墙模式)。

### 配置 iOS 环境

前提安装好 Xcode 和选择好对应的模拟器。并执行下面的脚本

```shell
brew link pkg-config
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
```


### 配置 VSCode

安装好 VSCode，在插件的地方搜索 Flutter 和 Dart 对应的插件。

![验证](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2019-07-22-Flutter_Verify.png)
最后输入 flutter doctor 检测你的全部是否完毕，至此你可以展开 Flutter 之旅了。祝愉快