想上手Flutter的准备工作, 后续陆续完善.

系统: Mac OS

系统最低要求

• MacOS （64-bit）
• 磁盘空间：大于700M，如果算上Android Studio等编辑工具，尽量大于3G。
• 命令行工具：bash、mkdir、rm、git、curl、unzip、which、brew 这些都可以使用。

开发工具

XCode

用来编译iOS、iPadOS、macOS应用和打包上架(内置iOS开发工具链), 在App Store上搜索下载即可, 也可以在苹果官网下载指定版本: developer.apple.com/download/al…

Android studio

编写Dart&Flutter代码、编译安卓应用和打包, 需要安装Dart插件、Flutter插件(如下图)

安卓工具链, 使用安卓设备进行开发和调试 (如果用iOS设备进行开发和调试, 安卓工具链不安装也可以) Android studio的设置中快速下载对应安卓工具链的SDK(如下图)

Chrome

浏览器 用来运行web端项目.

Visual Studio code

需要安装Dart插件、Flutter插件, 作用和Android studio一样, 安装其中一个就可以.

命令行工具

CocoaPods

用来管理苹果相关的三方库, 安装需要Ruby环境、Ruby管理工具(RVM),苹果电脑自带的Ruby环境有可能版本低

1.1.通过Ruby的分包工具Gem安装CocoaPods 

sudo gem install -n /usr/local/bin cocoapods

需要输出密码时光标不会移动, 密码输入完成按回车健就可以.

Password:

安装过程有点慢, 等待即可. 输出结果:

22 gems installed

1.2.检查安装位置

which pod

输出结果:

/usr/local/bin/pod

1.3.配置CocoaPods

pod setup

输出结果:

Setting up CocoaPods master repo /usr/bin/git clone https: //github. com/CocoaPods/Specs. git master --progress cloning into 'master 

然后就卡住不动了,  Cocoapods正在将它的信息下载到~/.cocoapods里. 可以command+n新建一个终端窗口，执行cd ~/.cocoapods/进入到该文件夹下， 然后执行du -sh *来查看文件大小，每隔几分钟查看一次，这个目录最终大小约900多M. 当出现Setup completed的时候说明已经完成了。

如果有Cocoa pod 需要更新, 过程有点慢等待即可.

sudo gem install -n /usr/local/bin cocoapods --pre

2.Flutter推荐的安装方式 Homebrew(macOS 的套件管理工具)

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup

以上每一行命令都需要执行时间, 全部完成预计2小时左右, 并且需要VPN. Homebrew 官网: brew.sh/index_zh-cn…

- 安装可能遇到的问题

• ERROR: Error installing cocoapods:
• ERROR: Failed to build gem native extension.

上面的问题是RVM引起的, 检查RVM环境

• gem报错, 可能是安装了多个环境 通过下面的命令查看

where gem

Ruby

1.检查Ruby版本, Mac电脑自带Ruby

ruby -v

• 输出结果:

ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.x86_64-darwin21]

2.更新Ruby环境, 需要RVM工具, 下面有RVM的安装

rvm list known

3.根据第2步列出的ruby版本列表安装对应的版本即可.

rvm install 2.4.1

4.重复第1步查看是否成功 如果安装了多个版本的Ruby可以通过下面的命令切换

rvm use 2.6.9

Ruby镜像源切换 1.移除已有的源

gem sources --remove https://rubygems.org/

输出结果:

https://rubygems.org/ removed from sources

2.添加新的源

gem sources -a https://mirrors.ustc.edu.cn/rubygems/

输出结果:

https://mirrors.ustc.edu.cn/rubygems/ added to sources

3.查看当前镜像源

gem sources -l

RVM (Ruby Version Manager)

1.查看rvm是否安装

rvm -v

2.如果没有安装, 输入以下命令, 需要VPN, 有可能失败(网络原因)多试几次.

curl -L get.rvm.io | bash -s stable

3.配置RVM环境

source ~/.bashrc
source ~/.bashprofile

4.完成后重新执行第一步查看是否安装成功 成功后输出结果:

rvm 1.29.12 (latest) by Michal Papis, Piotr Kuczynski, Wayne E. Seguin [https://rvm.io]

Java

一般情况下Mac电脑都带, 但是有可能版本太老 查看安装地址

/usr/libexec/java_home -V

查看版本

java -version

Java SDK下载: www.oracle.com/technetwork…

JDK目录结构	文件作用
bin	JDK开发工具的可执行文件。
lib	开发工具使用的归档包文件。
jre	Java 运行时环境的根目录，包含Java虚拟机，运行时的类包和Java应用启动器，但不包含开发环境中的开发工具。
demo	含有源代码的程序示例。
include	包含C语言头文件,支持Java本地接口与Java虚拟机调试程序接口的本地编程技术。

配置java环境

cd ~ 

如果此前建过.bash_profile隐藏配置文件,直接在终端打开文件即可,如果没有则输入下方命令。

touch .bash_profile

输入open .bash_profile打开文件

open .bash_profile

打开.bash_profile文件后中输入环境配置参数,将下方参数放入其中，并保存(如果用的是vi打开的按esc 输入:wq退出如果是文本直接command + S)退出即可。注意其中的JAVA_HOME这是上文提到的JDK安装路径，自己JDK安装路径放这放这，然后保存。

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-11.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export JAVA_HOME
export PATH
export CLASSPATH

输入以下命令使配置文件生效。

source .bash_profile 

检查环境变量的路径，查看是否配置成功。

echo $JAVA_HOME

查看JDK的版本信息。

java -version

Flutter SDK 下载

• SDK官网下载地址: docs.flutter.dev/get-started…

根据不同系统下载对应的稳定版本SDK macOS的M系列芯片和intel芯片对应不同的SDK包 SDK压缩包下载完成后解压路径选择好, 路径变动后需要修改的地方很多.

• 英文官网:flutter.dev
• 中文官网:flutter.cn

环境配置

1. 通过终端进行环境变量配置, 命令如下, 如果没有文件通过vim创建

open ~/.zshrc

2.在打开的文件里增加如下内容, 

#配置Flutter环境变量
export PATH=~/(这里是flutterSDK的路径)/bin:$PATH
#export PATH=~/Project/flutter_sdk/sdk_3.7.11/flutter/bin/cache/dart-sdk/bin:$PATH
#配置Flutter镜像, Flutter 的执行是要进行联网的，如果有VPN这个可以忽略
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

3.配置完成后，需要用source命令重新加载一下 ，具体命令如下：

source ~/.zshrc

4.上面的都完成后 在终端输入以下命令检查

flutter doctor

如果以上工具和插件都正确安装后输出结果如下图

也可以用 flutter doctor -v 查看更详细的检查项

flutter doctor -v

如果哪里有错误请评论指出. 感谢🙏