在開發Flutter的過程中,由於我們需要開發蘋果APP,所以,我們就需要配置一下蘋果的Flutter環境,接下來,就一步步的給大家展示 Mac本如何配置Flutter
一、準備工作
- 升級MacOS到最新的系統(建議是最新的系統)
- 安裝最新的Xcode
- 電腦上面安裝brew https://brew.sh/
二、下載 Flutter、配置 Flutter 環境變量、配 置 Flutter 鏡像
- 下載Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos - 把下載好的 Flutter SDK 隨便減壓到你想安裝 Sdk 的目錄如 /Users/admin/Downloads/flutter
- 解壓好後,打開終端(Command+空格 搜索終端),輸入下面這行命令
vim ~/.bash_profile
輸入後,就進入下面這個情況
默認是無法編輯的,需要按下你的i
鍵進入可編輯狀態,將下面這些複製進去,這裏需要注意一下:第一行的 PATH= 這個路徑是你自己的FlutterSDK路徑,不要用我的這個
export PATH=/Users/admin/Downloads/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
如何查看您的FlutterSDK路徑?
方法一:
新建一個終端窗口,將你的SDK拉入進新窗口中,就會顯示他的路徑了
點擊訪答,找到你的Flutter路徑
直接將你的Flutter文件夾拉入到終端當中,就會展示文件夾的路徑了
方法二:
找到Flutter文件夾,右鍵有一個顯示簡介
- 配置好後,按下
Esc
,輸入命令::wq
保存並退出Flutter,這時候,你的環境就配置完畢了, 您可以再次輸入我們上面的哪個vim命令進入查看一下,如果有的話,那就沒問題了,接下來,就是輸入下面這行命令,讓您的環境配置生效了
source ~/.bash_profile
輸入這個命令之後,如果命令行出現下面這個,恭喜您,您的Flutter SDK環境已經配置完畢了
注意如果配置完成後輸入 flutter -h 告訴你 flutter 不是內置命令之類的錯誤的話,可能 sdk 沒有配置成功,也可能 sdk 下載的時候沒有下載全
三、運行 flutter doctor 命令檢測環境
首次運行會出現以下錯誤,不要慌,我們來解決掉它
在修改這些錯誤之前,要先安裝個brew,這個相當於我們Windows中的npm,專門用來安裝包的
地址:https://brew.sh
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
由於每個人的報錯情況是不同的,因爲我的Mac本之前配置過brew,有一些環境是已經安裝好了的,所以我只需要執行一個命令就行,但是如果讀者您的錯誤 和我上面截圖的錯誤不同,比較多的話,就利用brew運行 終端給出的解決辦法,也就是To install
下面的那些,就是需要我們運行的命令行如果有不懂如何解決的,可留言@我
運行完這些命令後,我們再一次運行flutter doctor檢測,可以看到,我們的Mac環境已經搭建完畢了
上面的那個紅X是因爲我們沒有配置Android模擬器的問題,並不影響我們使用
,如果需要配置的話,可以參考配置Windwos的環境或者看我的另外一篇文章:利用VScode搭建Flutter環境開發
四、命令行工具生成 Flutter 項目
sudo flutter create flutterdemo
- 首先我們要創建自己的項目文件夾,比如我就在桌面創建了後,利用命令cd 進入到我們的項目路徑
進入來後,我們就可以利用創建項目的命令創建項目了
輸入創建命令後,需要輸入您的電腦密碼,回車後,就能夠創建成功您的第一個Flutter項目了
Flutter已經提示我們可以運行該項目拉~~~~
五、修改 Flutter Sdk 目錄的權限以及項目的 權限
保險起見,我們需要給我們的Flutter項目和SDK加上可以修改的權限或者 最高權限
sudo chmod -R 777 *
代表遞歸給當前文件夾下的所有文件添加最高權限
六、Xcode 打開 flutter 項目 模擬器運行項 目
首先打開項目,進入到IOS當中
雙擊,Xcode就可以打開Flutter項目了
點擊運行後,首次運行可能會花費時間比較長,所以需要等待一下。
還有的問題就是已經安裝上了demo,但是一直打不開,我們稱爲假卡死狀態
,這個時候,您只需要將demo刪除掉,從新再一次的運行就可以解決了。
成功運行
七、在 Vscode 中配置 開發 Flutter 項目
首先去Vscode官網,下載最新版的Vscode(AppStore搜不到)
下載好後,安裝Flutter插件以及Dart插件,一般安裝了Flutter後,Dart都會隨帶安裝上
接着就是導入您的Flutter項目,就可以直接Flutter run
運行起來您的項目了