一、前言
在上一篇文章中，介紹了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模式：
這時我們只需要修改代碼后保存自動就可以更新界面，就實現了熱更新功能~~