一、准备工作

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

frc ea85f0f855493167311a911df7755105 - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
01.png

2、把下载好的 Flutter SDK 解压到你想安装 SDK 的目录

如:/Users/yourname/flutter/

frc afdb2da460acc9c5c993af0657d57254 - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
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 的时候会提示下面错误

frc cae1947e07b1e584cb82e6b3f0e56a14 - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
03.png
frc 5c3831e740a4d2e723287f2ae7e8a1fd - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
04.png

四、 配置 Flutter iOS环境

1、如果电脑上面没有安装 brew 的话首先第一步需要安装 brew
https://brew.sh/

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

frc 58b45722161df46931f6ebcb234b9e3c - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
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 的环境配置完成

frc bb2f7bcafad3547ffa0ee6d37985f5f2 - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
06.png

五、命令行工具生成 Flutter 项目

cd /Desktop

mkdir flutter_demo

cd flutter_demo

sudo flutter create demo
frc d29662f6582b57e5adc294bd7c9bf58f - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
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 项目

frc 60a769ba8f9451fb455bb7cedf0069eb - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
08.png

注意:打开项目之前一定要修改权限

  1. 选择模拟器
frc 31abdcb5a934d1e2e431b8003a0ac4a5 - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
09.png
  1. 选择真机
  • 需要有苹果开发者账号
  • 配置证书
frc fbe2cf0ba175ebba02ca82aa12d6d6f8 - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
10.png

八、在 VSCode中配置,开发 Flutter 项目

1、安装插件

  1. Dart
  2. Flutter
  3. Flutter Widget Snippets

2、VSCode 中打开 Flutter 项目进行开发

frc 1e53bceb7295d0165a65a486bae5fb2d - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
11.png

3、运行 Flutter 项目

frc 29709d79c5e00d5cc4c93ae09dbfa2c7 - Flutter 03 - macOS 上面搭建 Flutter iOS 运行环境
12.png
快捷键描述
r 键点击后热加载,也就算是重新加载吧
p 键显示网格,这个可以很好的掌握布局情况,工作中很有用
o 键切换 android 和 iOS 的预览模式
q 键:退出调试预览模式

Flutter 03 – macOS 上面搭建 Flutter iOS 运行环境