Flutter macOS环境配置

其实通读一下文档后的感觉就是还蛮复杂的，起码比windows下配置要复杂一下，可能也是我平时windows用的比较多吧，今天这篇文章就以最简单直接的方式引导在macOS上配置Flutter开发环境

文章目录

• 准备
• 下载SDK - 先配置一下镜像 - 下载sdk - 设置sdk路径 - 解压sdk - 添加flutter相关工具到path中
• 开始配置 - 运行 flutter doctor 检测本机当前环境 - 装插件 - 新建项目 - 运行项目
• 更新环境变量
• ios配置： - 打开xcode
• Windows下配置Flutter开发环境

准备

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

下载SDK

• 先配置一下镜像

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

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置

• 下载sdk

下载地址：https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

选择最新的正式版本就行。

• 设置sdk路径

我在user目录下新建了一个FlutterSDK文件夹来存放：

• 解压sdk

执行命令：

cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

就是进入存放sdk的目录，然后解压。

比如我的就是：

解压之后，刚才设置的路径下就会多一个flutter的文件夹：

• 添加flutter相关工具到path中

export PATH=`pwd`/flutter/bin:$PATH

此代码只能暂时针对当前命令行窗口设置PATH环境变量，要想永久将Flutter添加到PATH中请参考下面更新环境变量部分。

这一步是为了可以使用flutter中的工具，比如检测环境配置等。

开始配置

• 运行 flutter doctor 检测本机当前环境

flutter doctor

第一次执行可能会有点慢，后面就会快很多的。

执行完会看到一堆报错，别慌，都好解决的。

直接从下面的Android Studio开始看，提示flutter插件和dart插件没安装，还有就是没有设备可以连接，先一步一步来。

• 装插件

打开Android Studio，安装flutter插件，也会提示安装dart插件，装就完事了，然后会提示重启。

安装完并重启之后，再次执行flutter doctor来看看现在是什么效果。

可以看到Android Studio 这一项已经没有报错了。

关于没有设备可以连接，完全不用担心，启个模拟器就行了。

• 新建项目

这个时候已经可以新建项目了：

可以看到新建项目的时候已经多了一个new flutter project的选项了。

注意：项目名称是小写加下划线的，然后选择你的sdk地址即可。

• 运行项目

新建项目之后会有一个默认的小demo模板，可以直接运行。

先选择一个模拟器，点击运行不会帮你自动启一个模拟器，要自己先手动启一个。

然后运行看看效果。

第一次运行初始化会有点慢,但是后面就快了，而且还有热重，如果不是特别大的项目，基本上不到1s就能看到效果了。

可以看到一个默认的项目 。

然后我们来改一下title 和 加一个 hello flutter。

这一步主要是体验一下热重载

代码就不贴了，改好直接按command+s就行。

可以看到是相当的快，不到1s，可以说是非常提升效率了。

看效果：

可以看到标题改了，而且中间也多了一行红色的hello flutter。

更新环境变量

上面基本上都没有什么难度，但是到这里可能就会遇到坑了，比如我就遇到了。。

为什么会有这一步呢，是因为上面我们执行export PATH=pwd/flutter/bin:$PATH的时候，只是暂时把flutter相关工具加入到path中，这一步呢，就是永久的加入到path，以便可以运行flutter命令在任何终端会话中。

官方的3步骤：

• 确定您Flutter SDK的目录，您将在步骤3中用到。
• 打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.
• 添加以下行并更改PATH_TO_FLUTTER_GIT_DIRECTORY为克隆Flutter的git repo的路径:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

第一步sdk路径是我们自己知道的，ok直接执行第二步：

$HOME/.bash_profile

ok，爬坑之路开始了，别慌，直接带你跳坑。

你可能会遇到：

Permission denied

没有权限，然后搜解决办法，参考https://blog.csdn.net/qq_16525279/article/details/80245350

按照操作执行，但是又提示 sudo: chmode: command not found, 一直找不到原因。

注意了，我们其实可以直接打开.bash_profile文件的（一般在Mac的当前用户目录下）：

open .bash_profile

没有的话就创建：

touch .bash_profile

然后再打开。

打开是这样的：

然后编辑，把镜像和flutter加进去：

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

PATH_TO_FLUTTER_GIT_DIRECTORY就是你flutter存放的路径。

比如我的就是这样的：

保存。

然后执行刷新：

source $HOME/.bash_profile

然后来验证一下是否成功，输出path：

echo $PATH

可以看到第一个就是新增的flutter路径，到此更新环境变量就完成了。

ios配置：

上面是基于Android Studio进行配置的，现在看一下ios的配置。

我们重新执行以下 flutter doctor 看一下：

这时候可以看到只剩下xcode和ios的报错了。

配置也可以，按照提示 安装cocoapods、libimobiledevice、ideviceinstaller等等就行。

实际上开发环境只有一个就行了，主要是xcode不识别dart文件，as中有flutter和dart插件，毕竟都是google的亲儿子，所以相对来说是最佳开发环境，但是还是可以运行到ios模拟器上看效果的。

• 打开xcode

终端执行：

$ open -a Simulator 

打开一个ios模拟器。

然后as也能识别到并运行到ios模拟器中：

然后运行到ios模拟器上看看效果：

ok，到此就全部配置结束了，可能篇幅较长，但是图文的形式更容易理解些。

Windows下配置Flutter开发环境

https://cloud.tencent.com/developer/article/2019851