iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 4
0
Mobile Development

前端工程師的 Flutter 新手村挑戰系列 第 4

【前端的 Flutter 新手村】Day4-在Mac中架設Flutter開發環境(一):更新Android SDK、安裝Xcode

前一篇【前端的 Flutter 新手村】Day3-淺談Flutter的優秀之處談到Flutter許多的優點,今天我們要來架設Flutter開發環境,在mac中使用Flutter至少要滿足以下需求:

  • 作業系統: macOS (64-bit)
  • 儲存空間: 2.8 GB
  • 命令工具:
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which

環境安裝

Step1. 下載Flutter SDK

官網下載Flutter SDK (不要怕,藍色按鈕點下去就對了!)
https://ithelp.ithome.com.tw/upload/images/20190919/20121111KeBN0UYErs.png

Step2. 解壓縮SDK

載完後在終端機打下面指令,解壓縮剛剛下載好的zip檔。選擇要解壓縮的目的資料夾,我選擇放在Development裡。

 cd ~/Development
 unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.2-stable.zip

解壓縮完成後就可以看到Flutter資料夾出現了
https://ithelp.ithome.com.tw/upload/images/20190919/20121111L2XZKD2YXQ.png

Step3. 更改環境變量

設置Flutter的環境變量,讓我們可以使用Flutter指令。

 export PATH="$PATH:`pwd`/flutter/bin"

但這樣設定的話,Flutter指令只會在你目前的這個終端機畫面執行,如果想讓Flutter指令可以永久生效,請參考這裡的進階設定。

Step4. 看醫生檢查一下

flutter doctor檢查看看還缺少哪些必要條件~
https://ithelp.ithome.com.tw/upload/images/20190919/201211117TmSV2qPSp.png

看起來還缺滿多東西的,我們就一個一個補齊:

  • Android SDK
    因為我的電腦以前有裝過Android Studio,所以這邊Doctor說我需要更新至Android SDK 28、BuildTools 28.0.3,如果是新安裝的Android Studio,會自動幫你裝好最新版的Android SDK和BuildTools,只需要做 Step3 同意條款。

    Step1.
    果然一打開Android Studio就跳出更新訊息,點選"Update and Restart"更新
    https://ithelp.ithome.com.tw/upload/images/20190919/20121111LoewBrdqcf.png

    Step2.
    更新Android SDK 28、BuildTools 28.0.3,在Android Studio開啟畫面的右下角點齒輪符號"Configure",然後選"SDK Manager"
    https://ithelp.ithome.com.tw/upload/images/20190919/20121111uLjrelApWr.png

    點了之後會跳出Preference視窗,找到Android SDK API Level 28打勾
    https://ithelp.ithome.com.tw/upload/images/20190919/20121111YSl4OCorDN.png

    再選隔壁頁籤"SDK Tools"找到BuildTools然後很重要的一點!!要把右下角的"Show Package Details"勾起來才找得到版本28.0.3,也把他打勾,最後點OK開始更新~
    https://ithelp.ithome.com.tw/upload/images/20190919/20121111jVX9ZYEVOc.png

    Step3.
    再來是License的問題,可以用flutter指令修正:
    https://ithelp.ithome.com.tw/upload/images/20190920/20121111m7eep85Bu9.png

    flutter doctor --android-licenses
    

    輸入後會有6個條款要你接受,輸入y同意
    https://ithelp.ithome.com.tw/upload/images/20190919/20121111KaIMVHGCbv.png

    Step4.
    flutter doctor檢查一下,發現Android被打勾了!!
    https://ithelp.ithome.com.tw/upload/images/20190919/20121111bvePbx1fU2.png

  • Xcode
    接著我們來解決Xcode的問題:

    Step1.
    直接到App Store下載安裝Xcode,裝完後記得先點開Xcode同意License條款,然後他會繼續完成安裝。

    但跑完安裝程序後發現Xcode沒有被打勾,這時候需要執行下面的指令:

    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    

    Step2.
    接著安裝Cocoapods:

    sudo gem install cocoapods
    

    跑完後Setting up CocoaPods master repo

    pod setup
    

    OK!再給醫生看一下~Xcode也被打勾了!!
    https://ithelp.ithome.com.tw/upload/images/20190919/20121111YOEYojj0t8.png

還剩下三個問題明天再來解決~~/images/emoticon/emoticon13.gif


上一篇
【前端的 Flutter 新手村】Day3-淺談Flutter的優秀之處
下一篇
【前端的 Flutter 新手村】Day5-在Mac中架設Flutter開發環境(二):安裝Flutter及Dart plugins
系列文
前端工程師的 Flutter 新手村挑戰30

尚未有邦友留言

立即登入留言