iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
0
Mobile Development

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

【前端的 Flutter 新手村】Day6-"Hello Flutter!" 用VS Code打造你的第一個Flutter App

今天我們要來建立第一個Flutter專案了!
可以直接在終端機執行,但今天我選擇在VS Code,之後要開發比較方便,不用一直切換畫面!

開啟手機模擬器

依照官網教學,應該要先輸入:

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

但在這篇【前端的 Flutter 新手村】Day4-在Mac中架設Flutter開發環境(一):更新Android SDK、安裝Xcode我們已經設定過了,就不用再設定一次。
直接在終端機中輸入下面的指令來打開Simulator模擬器:

open -a Simulator

預設好像是iPhone XR,可以到Simulator上面的工具列選Hardware > Device更換手機

建立新專案

因為已經安裝好Flutter Plugin了 所以直接在命令選擇區中執行Flutter: New Project
https://ithelp.ithome.com.tw/upload/images/20190921/20121111DAFgvJbEjK.png
接著輸入專案名稱,再選要建立專案的位置
https://ithelp.ithome.com.tw/upload/images/20190921/20121111MWYWHtRiyN.png
完成後畫面會長這樣..
https://ithelp.ithome.com.tw/upload/images/20190921/20121111TNXb2T6w2w.png

Run Flutter

直接按F5(fn+F5)就會跑Debug程序,開始進行編譯,然後在模擬器中跑出App畫面。
預設專案是一個計數器,lib>main.dart有點像是index.html,App初始畫面就是它。
https://ithelp.ithome.com.tw/upload/images/20190921/201211117nyOU2lEdV.png

Hot Reload

還記得之前我們有提到Flutter的優勢嗎?(可以點這裡回憶一下^^)其中一個就是它支援Hot Reload
修改完Code後,command+s存檔,模擬器中就會自動更新~如果沒有的話可以點Flutter介面中的閃電(Hot Reload)按鈕。
https://ithelp.ithome.com.tw/upload/images/20190922/20121111VPpjDjHkwr.jpg

小插曲:為什麼VS Code一直找不到Flutter SDK ?

今天我試著要從VS Code建立flutter App時一直失敗,VS Code總是說我沒安裝Flutter SDK
https://ithelp.ithome.com.tw/upload/images/20190921/201211112FwGs4sHQS.png
所以在想會不會是環境變數的問題,昨天沒有設定全域變數,於是乎按照官網步驟更新環境變量,讓flutter指令可以永久生效:

  • Step1. 打開.zshrc文件(因為我是用zsh,如果是bash就是開.bashrc)

    open ~/.zshrc
    

    然後加入下面這段code,要將[PATH_TO_FLUTTER_GIT_DIRECTORY]改成你放Flutter SDK的路徑位置:

    export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
    

    因為我放在~/Development所以我應該要寫成:

    export PATH="$PATH:~/Development/flutter/bin"
    

    但是失敗啦!!!
    去stackoverflow爬文才發現要這樣寫才會成功((淚:

    export PATH="$PATH:/Users/[這裡放Username]/Development/flutter/bin"
    
  • Step2. 存檔後重啟.zshrc

    source ~/.zshrc
    

    確認一下有沒有flutter:

    which flutter
    

    成功!!現在不管在哪裡都能使用flutter囉~VS Code也可以用了~
    https://ithelp.ithome.com.tw/upload/images/20190920/20121111AbOEWWssj1.png

    https://ithelp.ithome.com.tw/upload/images/20190920/20121111oYk0WLCdyH.png


上一篇
【前端的 Flutter 新手村】Day5-在Mac中架設Flutter開發環境(二):安裝Flutter及Dart plugins
下一篇
【前端的 Flutter 新手村】Day7-Flutter App列表清單
系列文
前端工程師的 Flutter 新手村挑戰30

尚未有邦友留言

立即登入留言