Flutter入門--我要趕快完成基本環境設定!!(設定+疑難問題解決)
用WINDOWS開發APP會遇到一些環境設定小困難，用APPLE的MAC則順很多，所以特別用VirtualBox開一個新安裝Win10乾淨環境來做設定Flutter doctor的紀錄。
下圖是只有裝Google瀏覽器與7-ZIP壓縮軟體的乾淨環境，開始吧!
進Flutter官網(https://flutter.dev/docs/get-started/install)，點Windows圖示
後面都是跟著Flutter官網教學步驟做較詳細補充，這邊依照指示先安裝Git，裝完才開始下載Flutter SDK。
點連結跳轉Git下載頁，下載Git並安裝。
用預設設定一直無腦按[NEXT]下去，到完成安裝。
裝完Git驗證是否裝成功，開新的命令視窗打”git”指令，出現相關參數說明內容表示成功。
下載Flutter SDK壓縮檔，並解壓縮。
解壓縮完進入目錄資料夾，先把[flutter]資料夾複製起來。
依官網文章範例，在C磁碟機下新增一個名稱是 src新資料夾。
進src資料夾，把flutter資料夾貼上。
再來設定[環境變量PATH]，目的是方便我們Windows環境內命令視窗輸入Flutter指令，也可以不設定這一步驟，但是在執行Flutter指令時要多帶入落落長的執行檔路徑，小麻煩!每個步驟都有它的意義存在，先照做~
下圖是用滑鼠如何點進[環境變數]視窗
在[使用者變數(U)]段落找到"Path"做編輯，在原本內容分號最後面，加上bin路徑"C:\src\flutter\bin;"
不要忘記[系統內容]視窗要再按一次[確定]來完成環境變數設定。
最後驗證一下有沒有把flutter設定好，開一個新的命令視窗，直接輸入"flutter"，有跑出參數說明內容，表示剛剛環境變數有設定完成。
再來用"flutter doctor"指令來看還缺什麼要完成。
開命令視窗輸入”flutter doctor”，出現一個X與一個驚嘆號。
紅色X內容，主要就是說電腦內少了Android SDK，
驚嘆號內容，說沒安裝Android Studio這套軟體，
那我們就去Android Studio官網下載並做相關設定吧!
下面幾張圖就是Android Studio官網下載與安裝目前最新版4.2.1，下載與安裝過程應該沒什麼大問題，只是經驗告訴我們，會建議找舊版的Android Studio來裝會比較好，目前這版Flutter是2.2.0，安裝搭配舊版Android Studio 4.0.2是能正常work的。
沒關係，寫本篇文章就是希望有需要的人可以盡量先無腦照直覺往下跑一遍完整流程累積經驗，有問題後面會說明如何解決。
一樣，用預設設定一直無腦按[NEXT]下去，到完成安裝。
按下上圖[Finish]按鈕後，理論上電腦第一次安裝Android Studio，是會自動跳出下圖的Android Studio設定精靈視窗，用預設設定一直無腦按[NEXT]下去，直到完成設定。
按下上圖[Finish]按鈕後，理論上會自動跳出下圖的Android Studio歡迎視窗與版本資訊(Version 4.2.1)，重點在設定下圖紅框[Configure]下的[SDK Manager]與[Plugins]。
先點上圖的[SDK Manager]進去設定SDK，如下圖，切換到[SDK Tools]，多次測試，只需勾選下圖5項基本項目即可，按下[OK]。
按下[OK]後跳出 SDK License畫面，左邊有2項目都要點進去按[Accept]，[Next]按鈕才會亮起來。
再來進[Configure]下的[Plugins]
輸入"flutter"關鍵字做搜尋，按下[Install]來安裝Flutter外掛。
裝完Flutter外掛會自動連Dart也一併裝好，驗證方式是多了可以新增Flutter專案
辛苦到這邊，重新開命令視窗輸入”flutter doctor”，看還有什麼要解的，出現一個X與一個驚嘆號。
先解紅色X，主要說:找不到JAVA JDK，那就依照訊息內容提供的網址下載JDK並安裝，來解這問題，如下方幾張圖。
一樣，用預設設定一直無腦按[NEXT]下去，到完成安裝。
裝完JDK，回到命令視窗輸入”flutter doctor”，看還有什麼要解的，這邊提示有一些Android Licenses要接受，依照提示輸入"flutter doctor --android-licenses"指令，跳出多次需要輸入"y"就一直無腦輸入"y"即可。
完成後，再輸入”flutter doctor”驗證一下，可見紅色X已經變成綠色勾勾。
再來解黃色驚嘆號問題，在[控制台]的[程式集]看見明明我已經裝Android Studio，為何flutter doctor還是顯示沒有裝??
解法就是，移除目前下載的新版本，找舊版本來安裝即可，解除安裝過程與下載舊版與安裝都測試過，一樣用預設設定一直無腦按[NEXT]下去完成即可，相關重點截圖如下~
裝完舊版，可以在起始畫面看到版本變成4.0.2，再開新的命令視窗輸入”flutter doctor”，就能看到全部都打勾了，以上!!
測試了一下，後續有更新Android Studio到目前新版V4.2.X時，再用flutter doctor也是能維持全部綠色勾勾。
再來試著打開一台Android手機模擬器，點進[AVD Manager]
點進[+ Create Virtual Device]
確認左邊是[Phone]，按[Next]進下一步
選擇Android版本，版本旁有[Download]就點下去下載，下載完右下方[Next]才會亮起來可以按。
確認AVD Name有名稱與選擇直立的模擬器，按下[Finish]完成設定
按下紅框處三角形Play鍵，啟動模擬器
正常啟動模擬器後，就會類似下面畫面。
再來我們下載VSCODE，用它來寫Dart
下載完，一樣用預設設定一直無腦按[NEXT]下去安裝直到完成。
開啟VSCode，讓它支援Flutter的編輯，點進延伸模組，用"flutter"關鍵字搜尋，找到Flutter外掛，點[Install]安裝，跟在Android Studio裝Flutter外掛一樣，裝了Flutter套件，會連Dart一併裝好，安裝如下圖所示:
這邊我們可以試著開啟一個新的Flutter專案，點左下角齒輪，點[Command Palette](或用快速鍵Ctrl+Shit+P，熟悉之後都是用快速鍵)，在下拉清單內點選[Flutter:New Application Project]，如下圖:
跳出[選擇資料夾]視窗，就自己找個資料夾放專案檔，我這邊是找一個"demo"資料夾來放
再來出現要我們為專案輸入一個專案名稱，這邊我取名為"hello-world"，輸入完畢按下Enter，如圖
過個幾秒，專案就建起來了。
再來試著把hello-world專案跑起來看看，記得要先把Android模擬器開起來旁邊放著，如下圖:
最後，可以按鍵盤F5，或從功能表的[Run]/[Start Debugging]，或右上角Play三角圖示，開始Build建置App程式到模擬器上，如下圖
過一下下，就可以看到Flutter的hello_world程式順利在模擬器跑起來了，收工!!
看完文章覺得對您有幫助⋯
歡迎鼓掌 👏 與Follow，各位大大的鼓勵，會給我很大的創作動力，十分感謝!!
