Android Studio 與 IntelliJ

• Android Studio 與 IntelliJ
• Visual Studio Code

Android Studio 與 IntelliJ IDEA 在安裝 Flutter 外掛後，能提供完整的 IDE 體驗。

請依照下列 IDE 的官方指示安裝最新版本：

• Android Studio
• IntelliJ IDEA Community
• IntelliJ IDEA Ultimate

外掛會定期推出更新。當有新版本可用時，IDE 會主動提示你更新。

若要手動檢查更新：

1. 開啟偏好設定（macOS 上為 Android Studio > Check for Updates， Linux 上為 Help > Check for Updates）。
2. 若有 dart 或 flutter 顯示於列表中，請進行更新。

你可以透過多種方式建立新專案。

從 Flutter 起始應用程式範本建立新 Flutter 專案，在 Android Studio 與 IntelliJ 之間略有不同。

在 Android Studio：

1. 在 IDE 中，於 Welcome 視窗點擊 New Flutter Project，或在主 IDE 視窗選擇 File > New > New Flutter Project。
2. 指定 Flutter SDK path，然後點擊 Next。
3. 輸入你想要的 Project name、Description 及 Project location。
4. 若你有發佈應用程式的需求，請設定公司網域。
5. 點擊 Finish。

在 IntelliJ：

1. 在 IDE 中，於 Welcome 視窗點擊 New Project，或在主 IDE 視窗選擇 File > New > Project。
2. 在左側面板的 Generators 清單中選擇 Flutter。
3. 指定 Flutter SDK path，然後點擊 Next。
4. 輸入你想要的 Project name、Description 及 Project location。
5. 若你有發佈應用程式的需求，請設定公司網域。
6. 點擊 Finish。

建立新應用程式時，部分 Flutter IDE 外掛會要求你輸入反向網域格式的組織名稱，例如 com.example。這個名稱會與應用程式名稱一起作為 Android 的套件名稱，以及 iOS 發佈時的 Bundle ID。如果你有發佈應用程式的可能，建議現在就設定好。應用程式發佈後，這些資訊將無法再更改。你的組織名稱應具有唯一性。

若要開啟現有的 Flutter 專案：

1. 在 IDE 中，於 Welcome 視窗點擊 Open，或在主 IDE 視窗選擇 File > Open。

2. 瀏覽至存放現有 Flutter 原始碼檔案的目錄。

3. 點擊 Open。

Flutter 外掛會執行程式碼分析，提供以下功能：

• 語法高亮顯示
• 基於型別分析的程式碼自動補全
• 跳至型別宣告（Navigate > Declaration），以及尋找型別使用處（Edit > Find > Find Usages）
• 檢視所有目前原始碼問題（View > Tool Windows > Dart Analysis） 任何分析問題都會顯示在 Dart Analysis 面板中：
  

執行與除錯可透過主工具列控制：

當 Flutter 專案在 IDE 中開啟時，你應該會在工具列右側看到一組 Flutter 專用按鈕。

1. 找到 Flutter Target Selector 下拉按鈕，這裡會顯示可用的目標裝置清單。
2. 選擇你要啟動應用程式的目標裝置。當你連接新裝置或啟動模擬器時，會出現更多選項。

1. 點擊工具列上的 Play 圖示，或執行 Run > Run。 下方的 Run 面板會顯示日誌輸出。

1. 如有需要，在原始碼中設置中斷點。
2. 點擊工具列上的 Debug 圖示，或執行 Run > Debug。
   • 下方的 Debugger 面板會顯示 Stack Frames 與變數。
   • 下方的 Console 面板會顯示詳細日誌輸出。
   • 除錯會根據預設啟動組態進行。若要自訂，請點擊裝置選擇器右側的下拉按鈕，選擇 Edit configuration。

Flutter 提供業界最佳的開發循環，透過 Stateful Hot Reload 功能，讓你幾乎能即時看到程式碼變更的效果。 進一步了解，請參考 [Hot reload][Hot reload]。

若要檢視效能資料（包含元件重建資訊），請以 Debug 模式啟動應用程式，然後透過 View > Tool Windows > Flutter Performance 開啟效能工具視窗。

若要查看哪些元件（Widgets）被重建，以及重建次數，請在 Performance 面板中點擊 Show widget rebuild information。該影格的重建次數會顯示在右數第二欄。若重建次數較多，會顯示黃色旋轉圈。最右側欄位顯示自進入當前畫面以來，該元件被重建的總次數。未被重建的元件會顯示實心灰色圓圈，否則會顯示灰色旋轉圈。

這個功能的目的是讓你意識到元件何時正在重建——僅從程式碼可能無法察覺。如果有元件被重建而你沒有預期，通常表示你應該將大型的 build 方法拆分成多個元件。

這個工具可協助你除錯至少四種常見效能問題：

1. 整個畫面（或大部分）由單一 StatefulWidget 建構，導致不必要的 UI 重建。請將 UI 拆分成多個擁有較小 build() 函數的元件。

2. 螢幕外的元件被重建。例如，當 ListView 被放在一個很高、超出螢幕的 Column 內，或未為超出螢幕的清單設置 RepaintBoundary，導致整個清單被重繪。

3. AnimatedBuilder 的 build() 函數繪製了一個不需要動畫的子樹，導致靜態物件被不必要地重建。

4. Opacity 元件被放在元件樹過高的位置，或直接操作 Opacity 元件的 opacity 屬性來產生動畫，導致該元件及其子樹都被重建。

你可以點擊表格中的一行，跳轉到該元件在原始碼中的建立位置。程式執行時，旋轉圖示也會顯示在程式碼面板中，協助你視覺化哪些重建正在發生。

請注意，重建次數多不一定代表有問題。通常只有在你已經用 profile 模式執行應用程式，並確認效能不如預期時，才需要擔心過度重建。

請記得，元件重建資訊僅在 debug build 可用。請在真實裝置上以 profile build 測試效能，但在 debug build 下除錯效能問題。

如果你有其他值得分享的技巧，歡迎[告訴我們][let us know]！

協助（Assists）是針對特定程式碼識別符號的程式碼變更。當游標停在 Flutter 元件識別符號上時，會出現黃色燈泡圖示，表示有可用的協助。你可以點擊燈泡，或使用鍵盤快捷鍵（Linux 與 Windows 為 Alt+Enter，macOS 為 Option+Return）來啟用協助，如下圖所示：

快速修正（Quick Fixes）類似，但僅在程式碼有錯誤時顯示，並協助你修正錯誤。會以紅色燈泡標示。

當你想將某個元件包裹在其他元件外層時可以使用，例如將元件包裹在 Row 或 Column 中。

與上述協助類似，但適用於包裹現有的元件清單，而非單一元件。

將 child 參數轉換為 children 參數，並將參數值包裹在清單中。

Live templates 可加速輸入常見程式碼結構。只需輸入其前綴詞，然後在程式碼自動補全視窗中選取即可：

Flutter 外掛內建以下範本：

• 前綴 stless：建立 StatelessWidget 的新子類別。
• 前綴 stful：建立 StatefulWidget 及其對應 State 子類別的新子類別。
• 前綴 stanim：建立 StatefulWidget 及其對應 State 子類別的新子類別，並包含初始化為 AnimationController 的欄位。

你也可以在 Settings > Editor > Live Templates 中自訂範本。

Hot reload

在 Linux（預設 XWin 鍵盤配置）與 Windows 上，快捷鍵為 Control+⟦C