1. 程式人生 > >Flutter第一步,開發環境搭建Mac版

Flutter第一步,開發環境搭建Mac版

由於我公司使用的是Mac電腦,但家裡是windows。所以這篇文章沒有視訊,但我會寫的儘量詳細。希望你能通過閱讀文章,也能在mac上搭建起Flutter環境。照著這篇文章配置時,你最好自備了梯子,否則不保證能順利完成。

系統環境要求

因為Flutter是新出的框架,所以對系統還是有一定的要求的。

  • MacOS (64-bit)
  • 磁碟空間:大於700M,如果算上Android Studio等編輯工具,儘量大於3G。
  • 命令號工具:bash、mkdir、rm、git、curl、unzip、which、brew 這些命令在都可以使用。

注意:一般你會在brew這個命令沒有下載而載坑,很多mac系統都沒有安裝這個,你可以進行安裝,因為這個和本知識關係性不大,所以我就不寫流程了,如果你出現問題,直接點選連結學習安裝就可以了。

學習安裝brew:segmentfault.com/a/119000001…

下載Flutter SDK包

這裡推薦去官網下載就好,我掛了梯子,速度並不慢。

網址:flutter.io/setup-macos…

進入網址後,向下拖拽一下,然後看到圖片中的內容,點選紅框處就可以下載了。

alt

如果你這也感覺麻煩,那可以直接點選下面的連結:

點選直接下載:storage.googleapis.com/flutter_inf…

這個會隨著版本的升級,而失效,所以不建議使用。

配置環境變數

壓縮包下載好以後,找個位置進行解壓。這個位置很重要,因為下面配置環境變數的時候要用到。比如你配置到了根目錄下的app資料夾。

1.開啟終端工具(這個我就不用寫了吧),使用vim進行配置環境變數,命令如下:

vim ~/.bash_profile
複製程式碼

在開啟的檔案裡增加一行程式碼,意思是配置flutter命令在任何地方都可以使用。

export PATH=/app/flutter/bin:$PATH
複製程式碼

提示:這行命令你要根據你把壓縮包解壓的位置來進行編寫,寫的是你的路徑,很有可能不跟文章一樣。

配置完成後,需要用source命令重新載入一下 ,具體命令如下:

source ~/.bash_profile
複製程式碼

完成這部以後,就算我們flutter的安裝工作完成了,但是這還不能進行開發。可以使用命令來檢測一下,是否安裝完成了。

flutter -h
複製程式碼

出現下面的結果,說明到目前為止,我們安裝一切順利。

alt

檢查開發環境

到上邊為止,我們安裝好了Flutter,但是還不具備開發環境。開發還需要很多軟體和外掛的支援,那到底需要哪些外掛和軟體那?我們可以使用Flutter為我們提供的命令來進行檢查:

flutter doctor
複製程式碼

alt

如果你英文很好,你應該可以很容易讀出上面的檢測結果,有很多條目都沒有通過。需要我們安裝檢測結果一條條進行安裝,直到滿足開發環境。(如果有[!]x標誌,表示本行檢測沒有通過,就需要我們設定或者安裝相應的軟體了。)

有可能你的Android studio也沒有安裝,那麼你要先安裝這個編輯器,安裝好後,可以順便下載Android SDK。

Android Studio下載地址:www.android-studio.org/

開啟後選擇對應的Mac版本,如下圖(隨著網站的改版,可能略有不同)

alt

下載Android SDK的時候,記得搭上梯子,否則你會等到天荒地老(祝君一切順利)。

如果你有安裝,那麼第一步要作的是允許協議(android-licenses)。允許方法就是在終端執行如下命令:

flutter doctor --android-licenses
複製程式碼

然後讓你輸入Y/N的時候,一路Y就可以了(至於啥意思,我也沒仔細看,大概就和安裝軟體的下一步下一步是一樣的,你按N是不能成功的)。

這不完成後,我們再使用flutter doctor進行檢測後,會看到還是有很多x。大概如下:

  To install, run:
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller
✗ ios-deploy not installed. To install:
    brew install ios-deploy
✗ CocoaPods not installed.
    CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
    Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
    For more info, see https://flutter.io/platform-plugins
  To install:
    brew install cocoapods
    pod setup
複製程式碼

其實大概意思就是我們需要這些軟體,Flutter推薦你用brew命令進行安裝。

我們可以直接在終端裡輸入下列命令(每輸完一個都要等一會,等待軟體包安裝完成)

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
複製程式碼

安裝完這些,我大概花了1個半小時左右,我這是百兆光纖還加了梯子。

這個大問題解決以後,我們還需要為Android Studio安裝一下Flutter外掛(這個有可能你安裝過,如果出現下面的提示,說明你還沒有安裝)

✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
複製程式碼

開啟Android Stuido 軟體,然後找到Plugin的配置,搜尋Flutter外掛。

alt

出現上圖,點中間的Search in repositories,然後點選安裝。

alt

安裝完成後,你需要重新啟動一下Android Studio軟體。

我做到這裡環境就全部OK了,只有一個沒有找到除錯裝置了,因為我沒有除錯的手機硬體,所以出現這個提示,不用管它。

[!] Connected devices
    ! No devices available
複製程式碼

Pub源的配置

如果你沒有梯子,因為人人都知道的一個原因,還需要在環境變數裡配置一下Pub源,不然你是無法進行使用的。

執行:

vim ~/.bash_profile
複製程式碼

增加兩行配置

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

重新載入環境變數

source ~/.bash_profile
複製程式碼

希望大家都能安裝成功,這只是我的安裝過程,不敢保證全部正確,但是我儘量詳細的描述了我Mac的搭建過程,希望可以幫助到Flutter的愛好者。