使用VS Code 開發Flutter

安裝 VS Code

下載地址： https://code.visualstudio.com/

安裝 Flutter 和 Dart 插件

1. 打開 VS Code。
2. 打開 查看 > 命令面板…。
3. 輸入 “install”，然後選擇 擴展: 安裝擴展。
4. 在擴展搜索輸入框中輸入 “flutter”，然後在列表中選擇 Flutter 並單擊 安裝。此過程中會自動安裝必需的 Dart 插件。
5. 點擊 重新加載 以重新啟動 VS Code。

通過 Flutter Doctor 命令驗證是否安裝成功

1. 打開 查看 > 命令面板…。
2. 輸入 “doctor”，選擇 Flutter: Run Flutter Doctor。
3. 打開 輸出 面板查看是否有錯誤。

創建應用

1. 打開 View > Command Palette。
2. 輸入 “flutter”，選擇 Flutter: New Project。
3. 輸入項目名稱，比如 myapp，然後點 Enter
4. 創建或者選擇新項目的父文件夾。
5. 稍等一下項目創建成功，目錄中就會生成 main.dart 文件。

運行程序

1. 找到 VS Code 的狀態欄(窗口底部藍色的條)
2. 從 Device Selector 裡選擇一個設備。更多詳細內容，請參見 在 Flutter 設備中快速切換。如果沒有可用設備而且你也打算用模擬器，點擊 No Devices 然後打開一個模擬器。如果要設置一臺實際硬件設備，請根據操作系統在 安裝 頁面按照相關設備配置步驟進行操作
3. 點擊右上角一個齒輪狀的設置按鈕— gear，有一個紅色或者橘色的點，它在 DEBUG 文本框旁邊，選擇 Flutter。選擇調試配置：選擇現在連接的設備，或者模擬器（如果沒有，請創建）。
4. 選擇 Debug > 開始 Debugging 或者按F5。
5. 當應用啟動以後— 處理進度會出現在 Debug Console 頁面中。

當應用編譯完成後，就可以在設備上運行這個起步應用了。

嘗試熱重載 (hot reload)

Flutter 通過 熱重載 提供快速開發週期，該功能支持應用程序在運行狀態下重載代碼而無需重新啟動應用程序或者丟失程序運行狀態。修改一下代碼，然後告訴IDE或者命令行工具你需要熱重載，然後看一下模擬器或者設備上應用的變化

1. 打開 lib/main.dart。
2. 修改字符串

<code>You have pushed the button this many times
/<code>

改為

<code>You have clicked the button this many times
/<code>

3. 打開 File > Save All, 或者點擊 Hot Reload (綠色的帶有圓形箭頭的按鈕)。
   保存修改

你會發現修改後的字符串幾乎馬上出現在正在運行的應用程序上。

嘗試其他平臺運行應用

Web

Android

閱讀更多 全棧工程師的產品筆記 的文章

關鍵字: 或者 集成開發環境 操作系統