Flutter詳細環境搭建(文章絕對很小白,很通俗)Mac版

最近終於看到Flutter初正式穩定版了,不知是工作的原因還是市場確實如此,都感覺原生的開發都有一定幅度的削弱,而且谷歌也順應時代般的推出了Flutter,個人比較喜歡,所以想一起來嚐嚐鮮學習下。本人小白一枚,所以有不對之處請見諒,下面就是我在mac環境下的搭建環境變量的過程。

(這是在公司的電腦上搭建的,是MAC的搭建過程。有空再在自己的Windows上也來一把吧。)

第一步:

當然是去下載flutter的sdk了

https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos

現在有正式版的1.0

將下載好的flutter的sdk解壓到我們自己想要指定的目錄。

 

第二步:

其他的臨時環境變量我們就跳過不說了,這裏我們直接來說如何正式配置我們日常的flutter環境變量。

首先要進入我們的終端環境

如果你是第一次配置環境變量,可以使用“touch .bash_profile” 創建一個.bash_profile的隱藏配置文件(如果你是爲編輯已存在的配置文件,則使用"open -e .bash_profile"命令):

 

我這裏已經創建過該文件了,沒有創建過打開的肯定是一片空白咯。

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

export PATH=指定安裝好的路徑/flutter/bin:$PATH

export ANDROID_HOME="/Users/個人用戶名/Library/Android/sdk"

export PATH=${PATH}:${ANDROID_HOME}/tools

export PATH=${PATH}:${ANDROID_HOME}/platform-tools

這裏就是我的環境變量,也是我們搭建flutter所需的環境變量

前三行是flutter的,後三行是android的,輸入完後保存。

然後輸入命令行source .bash_profile是我們的配置生效,那麼到底有沒有生效,我門可以 echo $PATH來檢查一下

 

接下來我們執行flutter doctor就知曉我們的flutter環境變量是否真正的搭建完畢可用,下面這張圖就是我們的目標狀態

而下面就是我的初始狀態

有不少問題,接下來我就我的問題來一一解決。

其實很多提示都很明顯,小白也可以按照提示來一一進行解決,因爲我就是小白,哈哈。

一個!即代表一個小問題:

第一個:

sdk問題,這個按照提示來:

flutter doctor --android-licenses

一路點y就ok。

 

第二個:

因爲我本身是搞android開發的,所以之前也沒有安裝xCode,這個用來開發iosApp的開發工具,那這樣只好下載咯,去蘋果應用商店直接查xCode進行安裝就好。

安裝完後我們可以打開看一看,然後我就沒管了。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer,接下來按照提示輸入命令後該問題消失

第三個:

這個問題也是我們缺失了某些環境導致的,這個環境就是HomeBrew

https://brew.sh/,這個是他的官方網站,進入後可以直接按提示在終端輸入

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

接下來就是一個漫長的下載過程,等待就好,當一切等待結束後接下來就容易啦,在終端裏輸入或者複製執行就好了

brew update

brew install --HEAD usbmuxd

brew link usbmuxd

brew install --HEAD libimobiledevice

brew install ideviceinstalle

 

brew install ios-deploy

又一個問題解決了。

第四個:

很簡單,還是少環境。

在終端輸入sudo gem install cocoapods

應該是直接輸brew install cocoapods也可以,我也是直接去百度到的就這麼輸入了,大家可以試下,輸入執行後會下載cocoapods,等待下載完成後,在執行pod setup命令執行通過後就萬事大吉了,

 

這種問題基本就是沒有安裝flutter的插件導致的,vscode我用來開發小程序所以安裝過,沒安裝過我就不知道會顯示啥了,像我這樣的問題直接去插件裏搜索flutter並安裝就完事了,AndroidStudip也是一樣的,搜索flutter和dart兩個插件安裝重啓完事兒。

此時再次還行flutter doctor的話就像下面這樣的了,no issues 沒問題,哈哈。

 

下面我們就可以一起進入HelloWorld的世界了,哈哈!!!

如有不符合指出可參考Flutter中文網:https://flutterchina.club/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章