其實通讀一下文檔後的感覺就是還蠻複雜的,起碼比windows下配置要複雜一下,可能也是我平時windows用的比較多吧,今天這篇文章就以最簡單直接的方式引導在
macOS
上配置Flutter開發環境
文章目錄
準備
- 操作系統: macOS (64-bit)
- 磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間)
- 工具: Flutter 依賴下面這些命令行工具
bash
,mkdir
,rm
,git
,curl
,unzip
,which
下載SDK
由於在國內訪問Flutter有時可能會受到限制,Flutter官方爲中國開發者搭建了臨時鏡像,大家可以將如下環境變量加入到用戶環境變量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
下載地址:https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos
選擇最新的正式版本就行。
我在user目錄下新建了一個FlutterSDK文件夾來存放:
執行命令:
cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
就是進入存放sdk的目錄,然後解壓。
比如我的就是:
解壓之後,剛纔設置的路徑下就會多一個flutter
的文件夾:
export PATH=`pwd`/flutter/bin:$PATH
此代碼只能暫時針對當前命令行窗口設置PATH環境變量,要想永久將Flutter添加到PATH中請參考下面更新環境變量
部分。
這一步是爲了可以使用flutter中的工具,比如檢測環境配置等。
開始配置
flutter doctor
第一次執行可能會有點慢,後面就會快很多的。
執行完會看到一堆報錯,別慌,都好解決的。
直接從下面的Android Studio
開始看,提示flutter插件
和dart插件
沒安裝,還有就是沒有設備可以連接,先一步一步來。
打開Android Studio,安裝flutter插件,也會提示安裝dart插件,裝就完事了,然後會提示重啓。
安裝完並重啓之後,再次執行flutter doctor
來看看現在是什麼效果。
可以看到Android Studio 這一項已經沒有報錯了。
關於沒有設備可以連接,完全不用擔心,啓個模擬器就行了。
這個時候已經可以新建項目了:
可以看到新建項目的時候已經多了一個new flutter project
的選項了。
注意
:項目名稱是小寫加下劃線的,然後選擇你的sdk地址
即可。
新建項目之後會有一個默認的小demo模板,可以直接運行。
先選擇一個模擬器,點擊運行不會幫你自動啓一個模擬器,要自己先手動啓一個。
然後運行看看效果。
第一次運行初始化會有點慢,但是後面就快了,而且還有熱重,如果不是特別大的項目,基本上不到1s就能看到效果了。
可以看到一個默認的項目 。
然後我們來改一下title 和 加一個 hello flutter。
這一步主要是體驗一下熱重載
代碼就不貼了,改好直接按command+s
就行。
可以看到是相當的快,不到1s,可以說是非常提升效率了。
看效果:
可以看到標題改了,而且中間也多了一行紅色的hello flutter。
更新環境變量
上面基本上都沒有什麼難度,但是到這裏可能就會遇到坑了,比如我就遇到了。。
爲什麼會有這一步呢,是因爲上面我們執行export PATH=
pwd
/flutter/bin:$PATH的時候,只是暫時把flutter相關工具加入到path中,這一步呢,就是永久的加入到path,以便可以運行flutter命令在任何終端會話中。
官方的3步驟:
- 確定您Flutter SDK的目錄,您將在步驟3中用到。
- 打開(或創建) $HOME/.bash_profile. 文件路徑和文件名可能在您的機器上不同.
- 添加以下行並更改[PATH_TO_FLUTTER_GIT_DIRECTORY]爲克隆Flutter的git repo的路徑:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
第一步sdk路徑是我們自己知道的,ok直接執行第二步:
$HOME/.bash_profile
ok,爬坑之路開始了,別慌,直接帶你跳坑。
你可能會遇到:
Permission denied
沒有權限,然後搜解決辦法,參考https://blog.csdn.net/qq_16525279/article/details/80245350
按照操作執行,但是又提示 sudo: chmode: command not found
, 一直找不到原因。
注意了
,我們其實可以直接打開.bash_profile
文件的(一般在Mac的當前用戶目錄下):
open .bash_profile
沒有的話就創建:
touch .bash_profile
然後再打開。
打開是這樣的:
然後編輯,把鏡像和flutter加進去:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
PATH_TO_FLUTTER_GIT_DIRECTORY
就是你flutter存放的路徑。
比如我的就是這樣的:
保存。
然後執行刷新:
source $HOME/.bash_profile
然後來驗證一下是否成功,輸出path:
echo $PATH
可以看到第一個就是新增的flutter路徑,到此更新環境變量就完成了。
ios配置:
上面是基於Android Studio進行配置的,現在看一下ios的配置。
我們重新執行以下 flutter doctor 看一下:
這時候可以看到只剩下xcode和ios的報錯了。
配置也可以,按照提示 安裝cocoapods、libimobiledevice、ideviceinstaller等等就行。
實際上開發環境只有一個就行了,主要是xcode不識別dart文件,as中有flutter和dart插件,畢竟都是google的親兒子,所以相對來說是最佳開發環境
,但是還是可以運行到ios模擬器上看效果的。
終端執行:
$ open -a Simulator
打開一個ios模擬器。
然後as也能識別到並運行到ios模擬器中:
然後運行到ios模擬器上看看效果:
ok,到此就全部配置結束了,可能篇幅較長,但是圖文的形式更容易理解些。
寫作不易,點個贊支持一下唄 ^ _ ^
Windows下配置Flutter開發環境
https://blog.csdn.net/yechaoa/article/details/89150852