iT邦幫忙

0

Flutter 學習日記: 1. 安裝 macOS開發環境

  • 分享至 

  • xImage
  •  

中國有中文社區網站

有完整的安裝介紹及使用教學範例可以參考
Flutter中文社區
Flutter中文網

1.安裝sdk

flutter 官方網站下載
https://ithelp.ithome.com.tw/upload/images/20200825/20121852CXvZoJ02Ev.png
可以直接下載最新的安裝包
https://ithelp.ithome.com.tw/upload/images/20200825/20121852vcuz1OaLnN.png
或是到SDK版本列表頁面,挑選其他stable的版本安裝
目前最新版 1.20.2 檔案大小有1.1G,下載的檔案是zip檔,需要解壓縮。
解壓縮到你要放置的路徑上
此範例解壓縮到桌面 Flutter\SDK\Flutter
https://ithelp.ithome.com.tw/upload/images/20200825/20121852epKmWH9gJP.png

2.設定PATH路徑

打開終端機,輸入以下指令

vi ~/.bash_profile

會出現vi編輯畫面
https://ithelp.ithome.com.tw/upload/images/20200825/20121852WmuEpTPso2.png
按下 i 進入輸入模式
輸入 export PATH=${PATH}:~/Desktop/Flutter/SDK/flutter/bin
~/Desktop/Flutter/SDK/flutter/bin 此為上述解壓縮的路徑
按下 esc 跳脫輸入模式 轉為 指令模式
按下 :wq 存擋後離開
在終端機,輸入以下指令

source ~/.bash_profile
echo $PATH

執行 bash_profile
並顯示執行後的PATH結果
https://ithelp.ithome.com.tw/upload/images/20200825/20121852IBx1KU0Nfb.png

3.安裝 Xcode 並檢測模擬器

必須安裝 Xcode 9.0 或以上版本,使用 App Store 安裝即可
打開模擬器,在終端機輸入

open -a Simulator

https://ithelp.ithome.com.tw/upload/images/20200825/201218520dT9UXD08v.png

4.安裝 Android Studio

直接去 Android 官網下載 Android Studio
https://ithelp.ithome.com.tw/upload/images/20200825/20121852f6mFCgRjnI.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852TfT8yiHDfG.png
https://ithelp.ithome.com.tw/upload/images/20200825/201218525kaw7Q1XSC.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852M0GvHTIZql.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852ZoKFBATezz.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852xJibAk3Huu.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852Hc7bc8RTT1.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852c3e85lDh6r.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852d0LkRI9DaX.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852WsO1NfOiZP.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852qwjhhgXVuj.png
https://ithelp.ithome.com.tw/upload/images/20200825/201218522RLRyDqVwE.png
https://ithelp.ithome.com.tw/upload/images/20200825/2012185254ZUtm8ZuA.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852zzw2TfYkJD.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852dtXFJRPJTI.png
安裝Flutter 開發插件
在config中選擇Preferences
https://ithelp.ithome.com.tw/upload/images/20200825/20121852tZRsVza2bL.png
選擇Plugins,並搜尋flutter,找到後直接install
https://ithelp.ithome.com.tw/upload/images/20200825/20121852rXsDwpQ1sn.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852YH7WgoiAjE.png
https://ithelp.ithome.com.tw/upload/images/20200825/20121852SRCasQbfXV.png
安裝完後,重啟Android Studio 可以看到新的選項, start a new Flutter project
https://ithelp.ithome.com.tw/upload/images/20200825/201218522MV2Su3j28.png

5.安裝 VSCode 與 Flutter 插件

在選單選擇 View -> Command Palette
https://ithelp.ithome.com.tw/upload/images/20200826/201218521ww6HCdk2p.png
會出現一個下拉式選單,在上方輸入 install 並選擇 Extensions: Install Extension
https://ithelp.ithome.com.tw/upload/images/20200826/20121852x9y9ouzS9R.png
在左上方搜尋欄位輸入 flutter,並安裝 flutter 插件
https://ithelp.ithome.com.tw/upload/images/20200826/20121852LYJxr5GwME.png
安裝完成後,可以在 View -> Command Palette 中輸入 flutter 可以找到flutter相關指令
https://ithelp.ithome.com.tw/upload/images/20200826/2012185296GQwOq2xe.png

6. 使用 Flutter doctor 檢測安裝環境

第一次 執行 flutter doctor , 出現蠻多錯誤
https://ithelp.ithome.com.tw/upload/images/20200826/20121852CJ4BcGxmdQ.png
由於 Xcode 版本問題 所以要安裝 CocoaPods,直接複製 畫面上的指令

sudo gem install cocoapods

另外還要執行 license 確認,執行指令後會跳出一堆問題 一律按下 y 即可

flutter doctor --android-licenses

先把模擬器打開,接下來再執行 flutter doctor 就會檢測通過囉
https://ithelp.ithome.com.tw/upload/images/20200826/20121852whQFsD7obW.png

大功告成!!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言