1、Flutter SDK 下载
在官网下载Flutter SDK最新可用的安装包,解压到自己的文件夹。可以放到桌面。
2、Flutter SDK 环境配置
我们需要将如下环境变量加入到用户环境变量中
// Flutter官方为中国开发者搭建的临时镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
// Flutter SDK路径 pwd是Flutter安装路径
export PATH='pwd'/flutter/bin:$PATH
注意: PUB_HOSTED_URL、FLUTTER_STORAGE_BASE_URL 配置的是临时镜像,并不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。
配置环境变量命令如下
在命令行中使用open ~/.bash_profile,打开bash_profile
open ~/.bash_profile
在bash_profile中将如下Path添加进去
// Flutter官方为中国开发者搭建的临时镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
// Flutter SDK路径 pwd是Flutter安装路径
export PATH='pwd'/flutter/bin:$PATH
使用source ~/.bash_profile 更新环境变量
source ~/.bash_profile
至此,Flutter相关环境变量,已经配置完毕了
但如果我们重启电脑后,有可能也会报错zsh: command not found: flutter,这是由于电脑重启后flutter相关环境变量没有更新,在命令行中输入source ~/.bash_profile 即可,也可以在zsh中执行下source ~/.bash_profile命令,方法如下:
使用命令open ~/.zshrc打开zshrc文件
open ~/.zshrc
再将命令source .bash_profile 放到zshrc文件中
source .bash_profile
3、安装Flutter
运行指令 flutter doctor,查看是否需要安装其它依赖项来完成安装
flutter doctor
有两个报错android toolchain 和 HTTP Host Availability,都先不管。android toolchain错误是因为没有安装配置Android Studio,我们是用Xcode的,可以忽略这个错误,HTTP Host Availability 错误应该是墙的问题,目前没啥影响
4、开始你的第一个Flutter 应用
通过命令行创建Flutter 应用
flutter create my_app
进入flutter应用所在文件夹
cd my_app
运行flutter 应用
flutter run
此时flutter应用会在Chrome浏览器上运行此时在命令行中输入r或R,应用会热重载,输入q,会退出应用
5、在iOS模拟器和真机上运行Flutter应用
5.1 在模拟器上运行应用
我们只需在运行Flutter应用前,保证模拟器已启动
我们可以通过命令open -a Simulator 或 Spotlight 打开模拟器
open -a Simulator
然后我们再执行命令
cd my_app
flutter run
5.2 在真机上运行应用
在命令行运行以下指令:
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
brew install --HEAD libimobiledevice 可能会报错 No package 'libimobiledevice-glue-1.0' found,直接执行 brew install libimobiledevice 也可以。目前没发现问题
如果报签名错误,就直接在iOS工程中,配置下签名
如果flutter真机运行时,报错无法打开“iproxy”,因为无法验证开发者,直接在命令行中修改iproxy
sudo xattr -d com.apple.quarantine [your_flutter_path]/bin/cache/artifacts/usbmuxd/iproxy
此时我们就可以在真机上运行Flutter应用了
6、配置编辑器VSCode
VS Code: 轻量级编辑器,支持Flutter运行和调试.
6.1 安装 VS Code
- VS Code, 安装1.20.1或更高版本.
6.2 安装Flutter插件
- 启动 VS Code
- 调用 View>Command Palette…
- 输入 ‘install’, 然后选择 Extensions: Install Extension action
- 在搜索框输入
flutter
, 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install - 选择 ‘OK’ 重新启动 VS Code
6.3 通过Flutter Doctor验证您的设置
- 调用 View>Command Palette…
- 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action
- 查看“OUTPUT”窗口中的输出是否有问题
参考 https://docs.flutter.dev/get-started/install/macos
https://flutterchina.club/get-started/editor/#vscode
https://blog.csdn.net/u014084081/article/details/108831987