flutter環境搭建mac版

jzoom發表於2018-06-29
FlutterMac

本文詳細介紹在mac下配置flutter環境的每一個步驟，通過圖文的方式使得讀者快速理解和掌握flutter的環境搭建流程。

系統環境要求

macOS (64-bit) 硬碟空間: 700 MB (不包含android studio等編輯器工具). 命令列工具:bash, mkdir, rm, git, curl, unzip, which,brew需要保證上述命令在命令列下能使用，

如果沒有安裝brew，那麼需要先安裝：參考：https://segmentfault.com/a/1190000013317511

下載flutter

推薦去官網下載，速度並不慢，網址：

https://flutter.io/setup-macos/

點選連結：

clipboard.png

更新後的連結地址:

https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.4.4-beta.zip

配置環境變數

先把剛才下載的flutter_macos_v0.3.2-beta.zip解壓縮，筆者選擇使用的目錄是根目錄下的app資料夾

flutter環境搭建mac版

配置環境變數,這裡筆者使用命令列：

vim ~/.bash_profile
複製程式碼

增加一行:

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

儲存一下，注意如果這個檔案不存在，那麼就新建一個。儲存完畢之後執行命令:

source ~/.bash_profile
複製程式碼

這個時候應該能執行flutter命令了，我們執行命令列：

flutter -h
複製程式碼

這個時候應該能展示flutter的命令幫助：

clipboard.png

檢查環境

執行命令列：

flutter doctor
複製程式碼

clipboard.png

按照檢測結果的說明，如果有[!] ✗ 標誌，表示本行檢測不通過，需要做一些設定或者安裝一些軟體。

如果android studio沒有安裝，那麼可以先裝下，並使用android studio下載最新的android sdk。android studio下載地址:http://www.android-studio.org/

flutter環境搭建mac版

如果有安裝，那麼很有可能看到：

[!] Android toolchain - develop for Android devices (Android SDK 27.0.3) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licens

需要執行

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

clipboard.png

這裡介面會要求輸入Y/N,一路輸入Y就行了。

✗ ideviceinstaller is not installed; this is used to discover connected iOS devices. 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

執行命令:

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

這個步驟有點慢...

當然讀者看到的也許和筆者不太一致，請酌情處理。

clipboard.png

這裡出現了個錯誤，按照說明，執行：

brew link --overwrite cocoapods
複製程式碼

然後繼續執行:

pod setup
複製程式碼

如果直接執行這個命令，會相當慢，那麼我們曲線解決：

cd ~/.cocoapods/repos
git clone https://github.com/CocoaPods/Specs.git
複製程式碼

如果還是太慢，那麼去

連結:https://pan.baidu.com/s/1mQ1VvslwwccdoLRi-I0pNg 密碼:lax1

下一份，解壓縮到~/.cocoapods/repos/master目錄

[✓] Android Studio (version 3.0) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality.

開啟android studio, 開啟plugin

clipboard.png

輸入flutter搜尋，點選中間的 Search in repositories

clipboard.png

點選install,順利的話安裝完畢之後重啟android studio

再次執行

flutter doctor
複製程式碼

clipboard.png

注意這裡有個坑，如果按照指引來做，會一直卡在這裡。這裡要先重灌一下python，執行下面的命令：

brew reinstall python@2
pip install six
複製程式碼

再次執行

flutter doctor
複製程式碼

如果順利，可以看到環境ok

配置環境變數

如果在國內，你懂的，還需要設定一下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
複製程式碼

至此，我們的環境就搭建完畢了，可以愉快的開發了。

搭建環境常見問題整理：

最近有很多朋友諮詢，大概的問題在這裡整理下，以後陸續更新：

Q: 從github clone下來的版本，為什麼執行flutter doctor的時候，等待時間很長?

A: 不建議使用github上面clone的flutter版本搭建環境，那樣的話很有可能因為網路原因導致最終不成功，需要直接從官網下載安裝包安裝，上面有提到，很多人親測下載速度很快，所以放心下。

Q: Android Studio上安裝完flutter和dart外掛後，重啟AS，並沒有看到選單上有多“新建Flutter工程”的選項

A: 清空Android Studio配置檔案,讓Android Studio重新生成配置檔案就行。

如果還有疑問,加入qq群 854192563,我們一起探討。

相關文章