macOS中配置Flutter开发环境（使用AndroidStudio开发）傻瓜版教程

前言

由于之前一直使用Windows所以现在切换到Mac来做开发是十分不适应的，表面上是使用习惯上的不同，更多的是对Mac系统的认识不够深造成的。所以下面将先普及一下Mac OS的基本情况，这对于后面配置Flutter的开发环境具有非常好的铺垫意义。（当然对于配置其他的开发环境也有相同的铺垫意义）

一.Mac OS相关

1.1 Mac OS系统

Mac系统是基于Unix内核的图形化操作系统。在Mac OS中由于其基于Unix内核，好多的操作都习惯使用shell脚本来完成（和Linux系统中使用习惯相同），例如部分软件的下载和安装以及插件的下载和安装等。
为了有助于下面理解配置环境时候所报错误下面先简单介绍一下shell以及bash和zsh等名词。

1.2 shell：

Shell是Linux/Unix的一个外壳，作为链接用户或者程序与内核的中间“人”，它负责外界与Linux/Unix内核的交互，接收用户或其他应用程序的命令，然后把这些命令转化成内核能理解的语言，传给内核，内核是真正干活的，干完之后再把结果返回用户或应用程序。不同语境下shell代表的含义也不同上面指的是shell是一种交互窗口，还有就是指一种脚本语言，这里能够理解就可以了。

1.2.1 shell的类型

Linux/Unix/macOS提供了很多种Shell，很多牛x程序员为了各种原因创造的。
我们现在来看一下我的macOS 中内置了哪些，打开“终端”然后输入cat /etc/shells，结果如下：

具体参照一下Shell的百度百科，或者可以查阅专业书籍。

下面着重介绍两种：

1.2.2 bash

Bash，Unix shell的一种，原先是计划用在GNU操作系统上，但能运行于大多数类Unix系统的操作系统之上，包括Linux与Mac OS X v10.4都将它作为默认shell。了解更多可以查看bash百度百科，或者查阅关键书籍。

1.2.3 zsh

有了那么多的shell版本，zsh作为shell一个版本有其独特的地方。这里不展开说了。这里有一个挺逗的zsh的文章可以看看。

1.3 vim文本编辑器

一种好用的文本编辑器，是系统内置的。下面来看一下他的基本使用：
vi/vim 共分为三种模式，分别是
命令模式（Command mode）
插入模式（Insert mode）
底线命令模式（Last line mode）
只要我们进入到编辑器中我们便处于命令模式；
然后我们想要编辑我们的文本内容我们要点击“ℹ️”键，我们便进入到了插入模式，此时我们可以进行基本的文本操作；
编辑完成之后，ESC退出插入模式，切换到命令模式；
此时点击“：”键，进入底线命令模式，此时我们输入wq！保存并离开vim编辑器；
上面只是简单的介绍了我们下面会用到的功能和操作，想了解更多vim编辑器的东西可以查看相关专业书籍，或者自行百度，goole。为了方便理解便绘制了下面流程图：

二. macOS中配置Flutter开发环境

Flutter中文网，一个很不错的网站，对于英文能力不是很强，又想快速入门Flutter的同学绝对是个好的选择，里面还有开源的免费的入门书籍。当然也可以去Flutter官网直接学
本来按照里面的步骤来就足够了，对于一个使用mac多年的老手来说没什么，但是对于一个新手来说就比较难了，因为好多的具体操作没有给出，我们对mac系统又不熟，所以我将我经历的记录下来提供给大家避免大家走弯路，下面就是将每个步骤具体话，做成一个傻瓜版本的配置流程说明。

背景

我的macOS版本如下：

开始配置Flutter的开发环境

先安装Xcode和AndroidStudio两个软件。其中Xcode去appstore下载安装就可以了；而AndroidStudio安装时候还要配置java的开发环境，因为Android开发用的java语言，因此要配置java的开发环境，这里对于其配置在这里就不做赘述了，大家可以自行搜索很简单。

2.1 使用镜像

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

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

首先，我们看一下macOS中环境变量有几种

a. /etc/profile 
b. /etc/paths 
c. ~/.bash_profile 
d. ~/.bash_login 
e. ~/.profile 
f. ~/.bashrc 

注意：

a和b是系统级别的，系统启动就会加载，其余是用户级别的。
c,d,e按照从前往后的顺序读取，如果c文件存在，则后面的几个文件就会被忽略不读了，以此类推。（所以上面标红的用户环境变量文件就是指的c）
f没有上述规则，它是bash shell打开的时候载入的。

下面开始具体操作

第一. 将Macintosh HD显示出来，就是硬盘。
首先，点击左上角的访达，然后选择偏好设置，然后选择xx的MacbookPro或者
硬盘（Macintosh HD）。如果选择前者，则在访达中左边栏中出现xx的MacBookPro这里面含有Macintosh HD。如果选择的是硬盘那么相应的就只有Macintosh HD。或者两者都选，其实效果是一样的，我们的目的都是将硬盘的入口显示出来。
第二. 将系统的隐藏文件都显示出来
进入我们的硬盘目录下，使用快捷键shift+cmmand+. ，那么之前隐藏的文件就都显示出来了，同样想要隐藏他们也使用相同的快捷键。
第三. 借助vim编辑器将环境变量添加到~/.bash_profile 中（即用户环境变量文件）中
步骤如下：
打开屏幕底部“终端”就是mac中的类似于Windows中的cmd程序窗口，上面已经介绍过了，这里不再赘述；
然后输入vim ~/.bash_profile然后回车；

然后输入i然后回车，即进入插入模式如下图底部显示INSERT，将export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn粘贴进去；

然后点击esc，进入 命令模式。然后输入“：”回车，进入底线命令模式，然后输入wq！保存并离开。配置环境变量完成。

上面的操作只是将文件保存成功了，想要路径生效还要进行关键的一步，在终端中输入：source ～/.bash_profile，完成之后如下图：

2.2 下载Flutter SDK

到官网下载就可以了，官网链接。下面是官网的页面，这里选择稳定版本的最新版本：如下图

然后放入自己准备好的目录下，注意记住目录下面有用。例如我的是：/Users/gongxiaoou/Desktop/gongworkspace/doc/FlutterSdk/flutter
然后配置环境变量，同上面镜像操作相同，将export PATH=/Users/gongxiaoou/Desktop/gongworkspace/doc/FlutterSdk/flutter/bin:$PATH添加到用户环境变量文件中，这里注意将flutter路径替换为你自己的，目前.bash_profile文件如下：

2.3 检查flutter环境配置是否完成

到目前为止，flutter肯定是没有配置完成的，比如说Xcode，AndroidStudio等都没有安装并且安装之后也会要解决和flutter相关的问题。
在终端中运行“flutter doctor”来检验还需要配置那些东西（由于我的系统中已经安装了Xcode和AndroidStudio，配置好了Android的开发环境，没有下载过的可以去先下载好并配置好开发环境了，这里就不展开赘述了），我的报错情况如下：

从上面我们可以看出有三个问题（根据自身电脑的已经安装和配置软件情况可能出现的报错很可能不同，只要按照给出的提示去安装相应软件或者插件或者去百度，google就可以了）。
解决第一个问题：由于我之前配置过ANDROID_HOME环境变量，所以只出现上面第一个问题，AndroidSdk中的部分权限条款要被允许，所以如果没有添加过ANDROID_HOME的先添加，然后再依照上面的错误提示在终端中输入“flutter doctor --android-licenses”，并一路输入y，也就是同意各种条款。
配置ANDROID_HOME环境变量：
将如下添加到和上面同一个用户环境变量文件中，然后流程和上面的一样，别忘了使其生效的那一步（ANDROID_HOME是你电脑中Androidsdk的路径，别忘记更换）。

export ANDROID_HOME="/Users/gongxiaoou/Library/Android/sdk"
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/tools/bin:$PATH
export PATH=$ANDROID_HOME/platform-tools:$PATH

配置好的.bash_profile文件如下
然后终端中输入flutter doctor --android-licenses。
解决第二个问题，从上面可以看出Xcode中缺少一个插件CocoaPods，我们按照给的建议来就可以了。
打开终端，然后输入sudo gem install cocoapods，等待安装完成就好了。
第三个问题是在AndroidStudio中安装flutter和dart插件
打开AS–>点击屏幕左上角AndroidStudio–>Preferences–>点击Plugins在输入框中输入flutter–>点击安装即可，如下图

dart插件的安装和flutter一样。
下载完成之后我们配置一下Flutter的sdk和dart的sdk在AndroidStudio中，最终效果如下：

通过上面的操作问题基本就都解决了，然后插上你的测试手机。
重新在终端中输入flutter doctor最终都成功会显示如下：

到这里你就可以使用AndroidStudio开始第一个Flutter应用的开发了。

三 . 可能遇到的问题

由于每个电脑的情况不同，在配置过程中遇到的问题也是不同的。有的是因为自己对bash不熟，造成很多的误操作，也有可能因为系统内置了zsh，我们还要去配置zsh中相关的环境变量。上面的步骤可能不能完全按照相应的操作产生结果，不用着急，一点点百度或者goole都能解决。下面是一个可能遇到的问题：

zsh: command not found：

原因是系统内置了zsh，我们要在.zshrc （和bash_profile同一个文件夹中）中配置相应的环境变量，我的配置完成如下：