Contents

在 VS Code 裡開發 Flutter 應用

Contents

安裝和配置

根據 編輯工具設定 的指引來安裝 Dart 和 Flutter 擴充（也叫做外掛）。

更新擴充程式

擴充的更新會定期釋出。預設情況下，當有可用的更新時 VS Code 會自動更新擴充。

手動安裝更新：

  1. 點選側邊欄的 Extensions 按鈕。

  2. 如果 Flutter 擴充顯示有可用更新，點選更新按鈕，然後重載。

  3. 重啟 VS Code。

建立專案

有幾種方式建立一個新專案。

新建專案

透過 Flutter 入門應用範本新建 Flutter 專案：

  1. 開啟命令面板（Ctrl+Shift+P （macOS 用 Cmd+Shift+P））。

  2. 選擇 Flutter: New Project 命令然後按 Enter。

  3. 選擇 Application 然後按 Enter。

  4. 選擇 專案地址。

  5. 輸入你想要的 專案名。

從現有原始碼開啟專案

開啟現有 Flutter 專案：

  1. 在 IDE 主視窗點選 File > Open。

  2. 選擇存放現有 Flutter 原始碼檔案的目錄。

  3. 點選 Open。

編寫程式碼及檢視問題

Flutter 擴充執行程式碼分析，它提供：

  • 語法高亮。

  • 基於豐富輸入分析的程式碼自動完成。

  • 導航到型別宣告（Go to Definition 或 F12）和查詢型別參考（Find All References 或 Shift+F12）。

  • 檢視所有當前程式碼問題（View > Problems 或 Ctrl+Shift+M (macOS 用 Cmd+Shift+M)）。所有問題分析都會在 Problems 面板展示：
    Problems pane

執行和除錯

在 IDE 主視窗點選 Run > Start Debugging 或按 F5 開啟除錯。

選擇目標裝置

當一個 Flutter 專案在 VS Code 中開啟，你會在狀態列看到一些 Flutter 特有項，包括 Flutter SDK 版本和裝置名稱（或者無裝置資訊）：

VS Code status bar

Flutter 擴充會自動選擇上次連線的裝置。然而，如果你有多個裝置/模擬器連線，點選狀態列的 device 檢視螢幕頂部的選擇列表。選擇你要用來執行或除錯的裝置。

無斷點執行

  1. 在 IDE 主視窗點選 Run > Start Without Debugging，或者按 Ctrl+F5，狀態列變橙色說明你正處於除錯模式。
    Debug console

斷點執行

  1. 如果需要，在原始碼中設定斷點。

  2. 在 IDE 主視窗點選 Run > Start Debugging 或按 F5。

    • 左側的除錯側邊欄顯示堆疊幀和變數。

    • 底部的除錯控制檯面板顯示輸出的日誌詳情。

    • 除錯基於預設的配置。也可以透過點選除錯側邊欄頂部的齒輪建立 launch.json 檔案自訂除錯。你可以修改裡面的值。

以除錯 (debug)、效能 (profile) 或釋出 (release) 模式執行應用

Flutter 提供了很多種不同的建構模式執行你的應用，更多內容請參考文件 Flutter 的建構模式。

  1. 開啟 VS Code 裡的 launch.json 檔案

    如果你沒有 launch.json 檔案，請到 VS Code 的 Run 檢視，點選 create a launch.json file 建立。

  2. 在 configurations 部分，修改 flutterMode 屬性值為你想要的建構模式即可。

    • 舉個例子，如果你希望在除錯模式下執行，你的 launch.json 檔案應該類似下面這樣：

      "configurations": [
   {
     "name": "Flutter",
     "request": "launch",
     "type": "dart",
     "flutterMode": "debug"
   }
 ]

  3. 在 Run 視圖裡執行你的應用。

快速編輯和重新整理開發週期

Flutter 提供一流的開發週期，透過 Stateful Hot Reload 特性使你在幾乎修改程式碼的同時就能看到變化。詳情請看 使用熱重載。

進階除錯

以下的除錯指南可能會對你有幫助：

視覺化佈局問題除錯

在除錯會話期間，命令面板 和 Flutter inspector 會新增一些額外的除錯命令，包括：

切換 Baseline 繪製 Baseline painting icon

每個 RenderBox 在底部繪製一條線。

切換重繪 Rainbow Repaint rainbow icon

重新繪製時在圖層上改變顏色。

切換慢模式橫幅 Slow animations icon
減慢動畫以啟用視覺檢查。
切換 debug 模式橫幅顯示 Debug mode banner icon

在執行除錯建構時隱藏 debug 模式的橫幅 (banner)。

除錯外部庫

預設情況下，Flutter 擴充禁止除錯外部庫。啟用步驟：

  1. 選擇 Settings > Extensions > Dart Configuration

  2. 勾選 Debug External Libraries 選項。

Flutter 程式碼編輯提示

如果你有其他我們應該提供的程式碼提示建議，請 告訴我們！

程式碼輔助和快速修復

程式碼輔助功能是特定程式碼識別符號相關的程式碼修改。當游標放在 Flutter widget 上時，黃色燈泡圖示會指示可用的修改，可以透過點選燈泡進行修改，或者使用快捷鍵 Ctrl+. (macOS 用 Cmd+.)，如圖所示：

Code assists

快速修復跟輔助類似，當一段程式碼有錯誤並且可以輔助修正時才會顯示。

Widget 巢狀(Nesting)輔助

當你有個 widget 想包裝進一個容器 widget 時，例如你想把 widget 放入一個 Row 或者 Column。

Widget 列表巢狀(Nesting)輔助

和上面的輔助類似，但它巢狀(Nesting)的是一個 widget 的列表，而不是單個的 widget。

child 和 children 轉換輔助

將 child 轉換成 children，並且把引數值寫進一個 list。

StatelessWidget 到 StatefulWidget 的轉換
建立 State 類並將程式碼移動過去，可以將 StatelessWidget 的實現更改為 StatefulWidget。

程式碼片段

程式碼片段可以用來加速輸入通用型別程式碼段。透過輸入字首來呼叫，然後從程式碼完成視窗中選擇：

Snippets

Flutter 擴充包含以下片段：

  • 字首 stless：建立一個 StatelessWidget 子類別。

  • 字首 stful：建立一個 StatefulWidget 子類別，並且和 State 子類別關聯。

  • 字首 stanim：建立一個 StatefulWidget 子類別，並且把包含欄位初始化的 State 子類別和一個 AnimationController 關聯。

你也可以透過在 命令面板 執行 Configure User Snippets 來自訂片段。

鍵盤快捷鍵

熱重載
除錯期間，在 除錯工具欄 點選 熱重載 (Hot Reload) 按鈕，或者按 Ctrl+F5（macOS 用 Cmd+F5）執行熱重載。

鍵位繫結可以在 命令面板 中使用 Open Keyboard Shortcuts 命令進行調整。

熱重載和熱重啟

熱重載的工作原理是將更新後的程式碼注入 Dart VM（虛擬機器）。不僅包括新增新類，還包括新增方法和欄位到已有的類中。但有些型別的程式碼是無法被熱重載的：

  • 全部變數的初始化

  • 靜態變數的初始化

  • 應用的 main() 方法

對於這些更改，你無需結束除錯過程而直接熱重啟 (hot restart) 你的應用。要執行熱重啟，執行 命令面板 的 Flutter：熱重啟命令，或者按 ``Ctrl+Shift+F5 (在 macOS 上使用 Cmd+Shift+F5)。

故障排除

已知問題和反饋

所有已知 bug 在這個 issue 列表中記錄： Dart 和 Flutter 擴充 GitHub issue 追蹤。

我們非常歡迎 bugs/issues 和特性請求的反饋。在提交新 issue 之前：

  • 在 issue 列表中查詢看該問題是否已被記錄。

  • 確保你已經 更新 最新版本外掛。

提交新 issue 時，請包含 flutter doctor 輸出。