一、準(zhǔn)備工作

1、升級 Macos 系統(tǒng)為最新系統(tǒng)
2烟零、安裝最新的 Xcode
3、電腦上面需要安裝 brew https://brew.sh/

二胸嘁、 下載 Flutter瓶摆、配置 Flutter 環(huán)境變量、配置 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、配置相關(guān)環(huán)境變量毫胜，

# 編輯 .bash_profile
vim ~/.bash_profile

# 配置 Flutter 環(huán)境變量
# Flutter 安裝目錄的 bin 目錄
export PATH=/Users/yourname/flutter/bin:$PATH

#  Flutter 國內(nèi)鏡像
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 不是內(nèi)置命令之類的錯誤的話书斜，可能 sdk 沒有配置成功诬辈，也可能 sdk 下載的時候沒有下載全

三、 運行 flutter doctor 命令檢測環(huán)境

第一次運行 flutter doctor 的時候會提示下面錯誤

03.png

04.png

四荐吉、 配置 Flutter iOS環(huán)境

1焙糟、如果電腦上面沒有安裝 brew 的話首先第一步需要安裝 brew
https://brew.sh/

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

05.png

2、分別執(zhí)行下面命令

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 并按照說明解決問題样屠。

執(zhí)行完成上面命令后然后重新運行: flutter doctor 如果出來下圖表示 iOS 的環(huán)境配置完成

06.png

五穿撮、命令行工具生成 Flutter 項目

cd /Desktop

mkdir flutter_demo

cd flutter_demo

sudo flutter create demo

07.png

六、修改項目的權(quán)限 以及 Flutter SDK 目錄的權(quán)限

# 修改項目的權(quán)限
sudo chmod -R 777 demo

# 如果上面修改失敗, 可以嘗試修改 Flutter SDK 目錄的權(quán)限
cd /Users/yourname/
# 修改 flutter 目錄下所有目錄的權(quán)限
sudo chomd -R 777 flutter

# 修改成功痪欲，再次修改該項目的權(quán)限
cd /Desktop

mkdir flutter_demo

cd flutter_demo

sudo chmod -R 777 demo

七悦穿、使用 Xcode 打開 flutter 項目

08.png

注意:打開項目之前一定要修改權(quán)限

1. 選擇模擬器

09.png

2. 選擇真機

• 需要有蘋果開發(fā)者賬號
• 配置證書

10.png

八、在 VSCode中配置业踢，開發(fā) Flutter 項目

1栗柒、安裝插件

1. Dart
2. Flutter
3. Flutter Widget Snippets

2、VSCode 中打開 Flutter 項目進行開發(fā)

11.png

3知举、運行 Flutter 項目

12.png