一、准备工作
1、升级 Macos 系统为最新系统
2、安装最新的 Xcode
3、电脑上面需要安装 brew https://brew.sh/
二、 下载 Flutter、配置 Flutter 环境变量、配置 Flutter 镜像
1、下载 Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
01.png
2、把下载好的 Flutter SDK 解压到你想安装 SDK 的目录
如：/Users/yourname/flutter/
02.png
3、配置相关环境变量，
# 编辑 .bash_profile
vim ~/.bash_profile
# 配置 Flutter 环境变量
# Flutter 安装目录的 bin 目录
export PATH=/Users/yourname/flutter/bin:$PATH
# Flutter 国内镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# .bash_profile 更新
source ~/.bash_profile
# 如果能出来一些命令说明 Flutter SDK 配置成功
flutter -h
# 注意如果配置完成后输入 flutter -h 告诉你 flutter 不是内置命令之类的错误的话，可能 sdk 没有配置成功，也可能 sdk 下载的时候没有下载全
三、 运行 flutter doctor 命令检测环境
第一次运行 flutter doctor 的时候会提示下面错误
03.png
04.png
四、 配置 Flutter iOS环境
1、如果电脑上面没有安装 brew 的话首先第一步需要安装 brew
https://brew.sh/
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
05.png
2、分别执行下面命令
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
注意:如果运行命令失败请运行 brew doctor 并按照说明解决问题。
执行完成上面命令后然后重新运行: flutter doctor 如果出来下图表示 iOS 的环境配置完成
06.png
五、命令行工具生成 Flutter 项目
cd /Desktop
mkdir flutter_demo
cd flutter_demo
sudo flutter create demo
07.png
六、修改项目的权限 以及 Flutter SDK 目录的权限
# 修改项目的权限
sudo chmod -R 777 demo
# 如果上面修改失败, 可以尝试修改 Flutter SDK 目录的权限
cd /Users/yourname/
# 修改 flutter 目录下所有目录的权限
sudo chomd -R 777 flutter
# 修改成功，再次修改该项目的权限
cd /Desktop
mkdir flutter_demo
cd flutter_demo
sudo chmod -R 777 demo
七、使用 Xcode 打开 flutter 项目
08.png
注意:打开项目之前一定要修改权限
- 选择模拟器
09.png
- 选择真机
- 需要有苹果开发者账号
- 配置证书
10.png
八、在 VSCode中配置，开发 Flutter 项目
1、安装插件
- Dart
- Flutter
- Flutter Widget Snippets
2、VSCode 中打开 Flutter 项目进行开发
11.png
3、运行 Flutter 项目
12.png
| 快捷键 | 描述 |
|---|---|
| r 键 | 点击后热加载，也就算是重新加载吧 |
| p 键 | 显示网格，这个可以很好的掌握布局情况，工作中很有用 |
| o 键 | 切换 android 和 iOS 的预览模式 |
| q 键: | 退出调试预览模式 |
网友评论