Flutter环境搭建ForMac

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter的环境搭建是有一些坑，本文是针对Flutter的环境搭建的流程记录，同时选择了Android Studio作为开发Flutter的工具。希望对大家的安装Flutter有所帮助。

01.安装Flutter

1.1 下载Flutter SDK

1.1.1 进入官网获取最新安装包，跳转下载页。

image.png

1.1.2 选择对应系统安装包

image.png

1.1.3 解压安装包
下载完成后，解压到自己想安装的路径。

1.2 配置环境变量

1.2.1 配置镜像及路径
由于Flutter在运行的时候需要去官方下载资源，因此没有vpn的话需要使用镜像。（图片来源官网）

image.png

如果使用默认的bash： vim ~/.bash_profile
如果使用zsh：vim ~/.zshrc
Flutter镜像配置：
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Flutter路径配置：
    export PATH=‘对应自己flutter的安装路径’/flutter/bin:$PATH

1.2.2 运行命令 flutter doctor
查看是否需要安装其他依赖。(绿色✅标示表示配置ok，红叉标示为未配置好)

image.png

02.Android Studio

2.1安装 Android Studio

安装 Android Studio可以去官网下载，跳转下载页。
下载完成后安装即可。（如图为安装完成）

image.png

2.2 配置SDK

使用 flutter doctor 检测
使用提示中的命令解决Android证书问题。全部执行y即可。

image.png

2.3 配置Android环境变量

#Android 环境配置
#Android
export ANDROID_HOME=~/Library/Android/sdk
#Android 模拟器路径
export PATH=${PATH}:${ANDROID_HOME}/emulator
#Android tools路径
export PATH=${PATH}:${ANDROID_HOME}/tools
#Android 平台工具
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

2.4 安装Android Studio的Flutter插件

缺少Flutter插件：

image.png

2.4.1 打开 Android Studio -> Preferences->Plugins->搜索flutter

image.png

重新打开后如图：

image.png

03.安装过程中可能的问题

3.1 系统偏好设置->安全性与隐私

image.png

3.2 Xcode 版本问题

image.png

3.3 安装报错

image.png

解决问题：

$ brew link pkg-config
$ brew install --HEAD usbmuxd
$ brew unlink usbmuxd
$ brew link usbmuxd$ brew install --HEAD libimobiledevice 
$ brew install ideviceinstaller