一、準備工作
1、升級 Macos 系統為最新系統
2、安裝最新的 Xcode
3、電腦上面需要安裝 brew https://brew.sh/(也可以用另外的一個源,安裝方式在我的簡書里有寫,安裝比較快)
二、下載 Flutter、配置 Flutter 環境變量、配 置 Flutter 鏡像
1、下載 Flutter SDK
https://flutter.cn/docs/get-started/install/macos
2、把下載好的 Flutter SDK復制到你想安裝 SDK的目錄下:如
/Users/admin/flutter_mac/flutter
備注:電腦上直接下載下來就是解壓過的,因此直接將下載的包復制過來即可(flutter_mac是自己又建了個文件夾。)
3、把 Flutter 安裝目錄的 bin 目錄配置到環境變量,然后把 Flutter 國內鏡像也配置到環境 變量里面
- 3.1打開終端,直接輸入
vim ~/.bash_profile
- 3.2然后進入編輯模式,發現無法編輯,然后直接直接鍵盤輸入i,進入編輯模式。
export PATH=/Users/admin/flutter_mac/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
備注:第一條路徑需要根據自己的環境配置,如果不知道怎么配置,就直接將flutter這個文件夾拖拽到終端,就可以顯示路徑。
- 3.3編輯完畢后,鍵盤esc,然后shift+:,回車,輸入wq,就可以保存退出了。然后
source ~/.bash_profile
以上操作完成之后,初步完成。另外需要檢查一下是否安裝成功。命令如下:
flutter -h
三、運行 flutter doctor 命令檢測環境
有的設備第一次運行 flutter doctor 的時候會提示下面錯誤,就進入四進行安裝
我的運行之后是下圖:
我安裝了VSCode,提醒我安裝一個東西,將提示的地址復制到瀏覽器,會有一個install按鈕,點擊之后自動跳轉到VSCode安裝。
四、 配置 Flutter iOS環境
1、如果電腦上面沒有安裝 brew 的話首先第一步需要安裝 brew
https://brew.sh/
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
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 ios-deploy cocoapods
pod setup
執行完成上面命令后然后重新運行: flutter doctor 如果出來下圖表示 ios 的環境配置完成。(我還未安裝安卓的環境,因為會有部分錯誤)
五、命令行工具生成 Flutter 項目
進入自己的代碼目錄下,命令行創建項目
sudo flutter create flutterdemo
注意:上述代碼現在是默認創建的swift項目了,如果需要創建oc代碼,需要使用 flutter create -i objc 項目名
六、修改 Flutter Sdk 目錄的權限以及項目的 權限
先cd到項目的文件夾,然后
sudo chmod -R 777 flutterdemo
順便再修改一下flutter SDK的權限。
七、Xcode 打開 flutter 項目 模擬器運行項目
8.在 Vscode 中配置 開發 Flutter 項目
1、Vscode 中安裝 Flutter 插件 Dart 插件。
2、Vscode 中打開 flutter 項目進行開發。
等一會就可以運行成功了。
r 鍵:點擊后熱加載,也就算是重新加載吧。
p 鍵:顯示網格,這個可以很好的掌握布局情況,工作中很有用。
o 鍵:切換 android 和 ios 的預覽模式。
q 鍵:退出調試預覽模式。