一、前言
在上一篇文章中，介紹了Flutter的開發環境搭建流程，創建并運行成功一個flutter專案，用戶界面呈現也通過Android虛擬機實作在線查看效果，
但是對于一個前端來說，用 VS Code 編輯器的同學肯定很多，第一次接觸Flutter開發對于Android Studio 編輯器可能不太熟悉，有些同學可能就會想可不可以使用VSCode來開發，這里我想說完全可以的，甚至用VSCode開發比Android Studio性能更高：
從任務管理器查看行程可以看出，我們使用VSCode占用記憶體明顯比Android Studio少，所以VSCode也是一個不錯的選擇，下面就來為大家講解如何使用VSCode撰寫我們的Flutter代碼，并且也能通過虛擬機查看實時效果！
二、安裝插件
VSCode下載地址：https://code.visualstudio.com
下載好VSCode編輯器后，打開主界面，在應用商店中搜索flutter點擊安裝：
flutter插件安裝成功后應該會自動安裝dart插件，如果沒有自動安裝的同學，可以自己動手搜索并安裝，安裝成功我們重啟VSCode
匯入我們事先創建好的flutter專案，我們可以看到左側會多了一個flutter的logo圖示：
這可以讓我們的專案代碼結構一目了然，是不是很nice
三、配置虛擬機
通過VSCode撰寫flutter，我們不可能打開Android Studio編輯器查看效果吧，這顯然是不科學的，這我還不如直接在Android Studio中撰寫呢，所以在這里我們需要創建一個bat命令，執行批處理檔案來喚起我們的模擬器，
??首先在桌面新建一個名為 EmulatorRun.bat 檔案（當然你也可以任意位置創建，在桌面只是方面啟動）
??編輯此檔案輸入：
D:\Android\android-sdk-windows\emulator\emulator.exe -netdelay none -netspeed full -avd <EmulatorName>
- D:\Android\android-sdk-windows\emulator\emulator.exe 表示你的emulator所在位置，一般在Android SDK目錄下的emulator檔案夾里
- -netdelay none -netspeed full 表示配置命令，前者表示網路延時設定為0，后者表示速度
- -avd <EmulatorName> 表示開啟哪個虛擬機，將<EmulatorName>替換成你的虛擬機名字（多個單詞之間用_連接）
??雙擊啟動 EmulatorRun.bat
這時我們的虛擬機就已經啟動了
四、運行flutter
在VSCode中打開Terminal（終端），輸入 flutter run 命令即可運行專案：
在這運行我們是能運行成功的，但是當我們修改dart內容時，界面不會發生實時更新，也就是我們所說的熱更新，這里我們需要在終端中按下 r 鍵，界面就會更新啦，
細心的同學其實已經發現了，在我們運行flutter專案后，終端會有提示，不止只有r一個快捷鍵：
- h：查看所有可用的互動命令
- d：終止flutter運行，但保持應用程式運行
- c：清屏
- q：退出，終止設備上應用程式
輸入h查看所有可用命令：
這里再舉兩個實用的：
? p：顯示網格構造線，這在開發程序中是非常實用的
? o：切換android和ios端
可以看到在ios端，appBar是居中的
雖然我們可以通過r鍵實作更新界面，但還是稱不上熱更新，怎樣才能修改代碼后保存及時更新呢？這里我們就需要使用VSCode的debug模式：
這時我們只需要修改代碼后保存自動就可以更新界面，就實作了熱更新功能~~
本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/16065059.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/450443.html
標籤：其他