Flutter基础：Flutter 环境搭建 for mac

Flutter的配置其实越来越简单了，尤其刚出来的时候，需要配置的东西太多。这里选择使用Android Studio作为开发 Flutter 的工具，后续更新 VC。

一、Flutter 安装

这里的步骤其实和官方的差不多，大家也可以直接参考 官网。

1.1 下载 Flutter 的 SDK

1.1.1 进入 官网

1.1.2 选择对应系统

1.1.3 选择最新版本压缩包下载

1.1.4 解压 SDK 包

解压完成后，选择安装路径。

因为Flutter的SDK中包含了很多命令行工具。我们需要配置环境变量，所以建议你安装到你平时放命令行工具程序的地方! 我这里放在了家目录下 ~/flutter （仅供参考，安装在哪里看你自己的习惯）

1.2 配置环境变量

1.2.1 配置镜像

因为Flutter在运行的时候，需要去官方下载所需要的资源。那么没有“梯子”的小伙伴你会需要镜像服务器，以下是官方文档的友情提示。

来到你对应Shell的配置文件进行配置。 如果你使用的bash那么配置 ~/.bash_profile 如果你使用的zsh（Mac新系统默认是zsh）那么配置~/.zshrc

查看 Shell 默认环境的命令：

$ echo $SHELL

# Flutter 镜像配置 
export PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub
export FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter
# Flutter 镜像配置 end

1.2.2 配置Flutter环境变量

接下来，将Flutter命令行工具的路径配置一下，还是对应Shell的配置文件中

# Flutter 环境变量配置 
export FLUTTER=~/flutter 
export PATH=$FLUTTER/bin:$PATH
# Flutter 环境变量配置 end

配置完成后，重新打开终端或者输入命令载入配置

# bash 则使用 source ~/.bash_profile
$ source ~/.zshrc

接下来，我们可以看看 Flutter 是否配置完成了。Flutter有一个doctor检测指令。专门用于检测你的 Flutter 环境的。

$ flutter doctor

绿钩就是配置OK了，红叉就是还没有配置好的，下图这样就是配置差不多了：

二、配置安卓环境

2.1 安装Android Studio

我们先安装Android Studio可以去国内官网下载

2.2 配置SDK

根据安装向导，安装相关SDK，安装过程无需翻墙。 进入偏好设置 CMD + ， 确保如下图安装：

2.3 安装Android Studio的插件

来到 Android Studio 的偏好设置界面，点击安装Flutter插件：

当跳出安装Dart插件的界面时，也点击Install进行安装：

安装完成后重启Android Studio，可以看到如下界面：

2.4 解决许可证问题

在运行flutter doctor 的时候，如果发现许可证问题。

打开终端，输入下面的命令，然后按提示，都输入 y，回车。

$ flutter doctor --android-licenses

2.5 配置安卓的模拟器

如果感觉安卓自带的模拟器不太好用，可以选择一款国内的夜神模拟器，其实类似的安卓模拟器有很多，选择它主要是因为它有Mac版本（嫌麻烦的也可以用系统自带的模拟器）。

2.5.1 下载安装

进入下载页 进行安装包的下载 执行安装操作，会得到下面两个应用程序：

2.5.2 使用

在打开VirtualBox之后再打开NoxAppPlayer，这样才能启动夜神模拟器，启动完成以后Android Studio的工程中就可以看到夜神模拟器了。

夜神没有安装成功的，也可以考虑网易mumu模拟器。

2.6 解决Gradle卡住问题

我们在首次运行的时候，如果发现卡在这不动了（如果没有这种情况就不用管了）。原因是Gradle的Maven仓库在国外...... 然后你就懂了。

Running Gradle task 'assembleDebug'...

解决它比较简单的操作就是镜像, 接下来进行配置。

2.6.1 修改项目下的 build.gradle 文件

文件路径：项目 -> Android -> gradle -> build.gradle

找到buildscript和allprojects里面的：

google()
mavenCentral()

修改为阿里云镜像：

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

如下图：

2.6.2 修改Flutter安装目录中的flutter.gradle文件

文件路径：flutter/packages/flutter_tools/gradle/flutter.gradle

修改内容如下（加入阿里镜像）：

buildscript {
    repositories {
        //google()
        //mavenCentral() 
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
    }
}

三、运行示例项目

3.1 创建工程

3.1.1 默认语言创建

通过以下命令创建工程，注意工程名不允许用驼峰，用下划线隔开就可以：

$ flutter create flutter_demo

创建完成：

3.1.2 指定语言创建

打开其中的 iOS 工程，发现语言是swift的：

其实语言是可以选择的，iOS 默认是swift，安卓默认是kotlin，通过help来查看如何使用：

$ flutter create --help

将项目删掉，通过下面命令来重新创建一个OC的项目：

$ flutter create -i objc flutter_demo

3.2 命令行 运行项目

3.2.1 iOS模拟器 运行项目

先通过下面命令打开 iOS 模拟器：

$ open -a Simulator

然后通过下面命令在模拟器上运行项目：

$ flutter run

选择 iOS 模拟器：

运行完成的示例项目：

同时可以看到热更新、热重启等相关控制命令：

3.2.2 iOS真机 运行项目

我们要想在真机上运行项目，要先通过 xcode 在真机上运行一次才行，因为 iOS 真机需要签名。

xcode有个弊端，就是没有r、R等这些控制命令。

再次执行flutter run命令：

这个过程还是挺慢的：

我平时开发都是用Android Studio，它会有r、R等这些控制命令。

3.3 Android Studio 运行项目

用Android Studio打开项目，其中main.dart是我们写代码的地方：

3.3.1 真机运行项目

接下来运行项目，可供选择的有iOS 模拟器、安卓 模拟器、iOS 真机、浏览器，我们用iOS 真机来运行

看下运行成功的效果：

3.3.2 无法打开“iproxy”报错

真机运行时，可能会遇到下面这个错误：

无法打开“iproxy”，因为无法验证开发者。

我们可以通过下面的命令来解决：

sudo xattr -d com.apple.quarantine 
sudo xattr -d com.apple.quarantine /Users/mac/flutter/bin/cache/artifacts/usbmuxd/iproxy

其中/Users/mac/flutter是我的 flutter 路径，换成自己的即可。

相关网站

• Flutter官网：flutter.io/docs
• Flutter中文网：flutterchina.club/get-started…
• Flutter开发文档：docs.flutter.io/flutter/dar…
• dart 中文文档：dart.cn