Flutter 环境搭建和必备工具
想上手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
环境配置
- 通过终端进行环境变量配置, 命令如下, 如果没有文件通过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