Mac笔记本配置Flutter开发环境

Mac笔记本配置Flutter开发环境

在开发Flutter的过程中，由于我们需要开发苹果APP，所以，我们就需要配置一下苹果的Flutter环境，接下来，就一步步的给大家展示 Mac本如何配置Flutter

一、准备工作

1. 升级MacOS到最新的系统（建议是最新的系统）
2. 安装最新的Xcode
3. 电脑上面安装brew /

二、下载 Flutter、配置 Flutter 环境变量、配 置 Flutter 镜像

1. 下载Flutter SDK
   /docs/development/tools/sdk/releases?tab=macos
2. 把下载好的 Flutter SDK 随便减压到你想安装 Sdk 的目录如 /Users/admin/Downloads/flutter
3. 解压好后，打开终端（Command+空格 搜索终端），输入下面这行命令

 vim ~/.bash_profile

输入后，就进入下面这个情况

默认是无法编辑的，需要按下你的i键进入可编辑状态，将下面这些复制进去，这里需要注意一下:第一行的 PATH= 这个路径是你自己的FlutterSDK路径，不要用我的这个

export PATH=/Users/admin/Downloads/flutter/bin:$PATH
export PUB_HOSTED_URL=
export FLUTTER_STORAGE_BASE_URL=

如何查看您的FlutterSDK路径？

方法一：
新建一个终端窗口，将你的SDK拉入进新窗口中，就会显示他的路径了

点击访答，找到你的Flutter路径

直接将你的Flutter文件夹拉入到终端当中，就会展示文件夹的路径了

方法二：
找到Flutter文件夹，右键有一个显示简介

4. 配置好后，按下Esc，输入命令::wq 保存并退出Flutter，这时候，你的环境就配置完毕了， 您可以再次输入我们上面的哪个vim命令进入查看一下，如果有的话，那就没问题了，接下来，就是输入下面这行命令，让您的环境配置生效了

 source ~/.bash_profile

输入这个命令之后，如果命令行出现下面这个，恭喜您，您的Flutter SDK环境已经配置完毕了

注意如果配置完成后输入 flutter -h 告诉你 flutter 不是内置命令之类的错误的话，可能 sdk 没有配置成功，也可能 sdk 下载的时候没有下载全

三、运行 flutter doctor 命令检测环境

首次运行会出现以下错误，不要慌，我们来解决掉它
在修改这些错误之前，要先安装个brew，这个相当于我们Windows中的npm，专门用来安装包的
地址：

/usr/bin/ruby -e "$(curl -fsSL )"

由于每个人的报错情况是不同的，因为我的Mac本之前配置过brew，有一些环境是已经安装好了的，所以我只需要执行一个命令就行，但是如果读者您的错误 和我上面截图的错误不同，比较多的话，就利用brew运行 终端给出的解决办法，也就是To install下面的那些，就是需要我们运行的命令行如果有不懂如何解决的，可留言@我

运行完这些命令后，我们再一次运行flutter doctor检测，可以看到，我们的Mac环境已经搭建完毕了

上面的那个红X是因为我们没有配置Android模拟器的问题，并不影响我们使用，如果需要配置的话，可以参考配置Windwos的环境或者看我的另外一篇文章：利用VScode搭建Flutter环境开发

四、命令行工具生成 Flutter 项目

sudo flutter create flutterdemo

1. 首先我们要创建自己的项目文件夹，比如我就在桌面创建了后，利用命令cd 进入到我们的项目路径
   进入来后，我们就可以利用创建项目的命令创建项目了
   
   输入创建命令后，需要输入您的电脑密码，回车后，就能够创建成功您的第一个Flutter项目了
   
   Flutter已经提示我们可以运行该项目拉~~~~

五、修改 Flutter Sdk 目录的权限以及项目的 权限

保险起见，我们需要给我们的Flutter项目和SDK加上可以修改的权限或者 最高权限

sudo chmod -R 777 * 

代表递归给当前文件夹下的所有文件添加最高权限

六、Xcode 打开 flutter 项目 模拟器运行项 目

首先打开项目，进入到IOS当中

双击，Xcode就可以打开Flutter项目了

点击运行后，首次运行可能会花费时间比较长，所以需要等待一下。
还有的问题就是已经安装上了demo，但是一直打不开，我们称为假卡死状态，这个时候，您只需要将demo删除掉，从新再一次的运行就可以解决了。
成功运行

七、在 Vscode 中配置 开发 Flutter 项目

首先去Vscode官网，下载最新版的Vscode（AppStore搜不到）

下载好后，安装Flutter插件以及Dart插件，一般安装了Flutter后，Dart都会随带安装上

接着就是导入您的Flutter项目，就可以直接Flutter run运行起来您的项目了