設定並測試 Flutter

 設定並測試 Flutter

https://docs.flutter.dev/install/quick

使用基於開源軟體的編輯器（例如 VS Code）在您的裝置上安裝 Flutter，即可開始使用 Flutter 開發您的第一個多平台應用程式！

學習如何使用任何基於開源軟體的編輯器（例如 VS Code）來設定 Flutter 開發環境，並體驗 Flutter 的開發者體驗。

如果您之前使用過 Flutter 進行開發，或者您喜歡使用其他編輯器或 IDE，您可以按照自訂設定說明進行操作。

你將會取得的成就

• 安裝 Flutter 的軟體必備組件。
• 使用 VS Code 下載並安裝 Flutter。
• 使用範例模板建立一個新的 Flutter 應用程式。
• 嘗試 Flutter 的開發特性，例如有狀態熱重載。

確認您的開發平台

本頁的說明旨在指導如何在Windows裝置 上安裝和試用 Flutter 。

如果您想按照其他作業系統的說明進行操作，請選擇以下選項之一。

下載必備軟體

為了獲得最流暢的 Flutter 安裝體驗，請先安裝以下工具。

1. 安裝適用於 Windows 的 Git

   下載並安裝最新版本的Git for Windows。

   如需有關 Git 安裝或故障排除方面的協助，請參閱Git 文件。

2. 下載並安裝 Visual Studio Code

   要快速安裝 Flutter，然後編輯和偵錯您的應用程序， 請安裝並設定 Visual Studio Code。

   您也可以安裝並使用任何其他支援 VS Code 擴充功能的開源程式碼編輯器。如果您選擇這樣做，那麼在本文的其餘部分，請假定 VS Code 指的是您選擇的編輯器。

安裝並設定 Flutter

現在您已經安裝了 Git 和 VS Code，請按照以下步驟使用 VS Code 安裝和設定 Flutter。

手動下載

如果您喜歡手動安裝 Flutter，請按照手動安裝 Flutter 中的說明進行操作。

1. 啟動 VS Code

   如果 VS Code 尚未打開，請使用 Spotlight 搜尋或從其安裝目錄手動開啟它。

2. 將 Flutter 擴充功能加入到 VS Code

   若要將 Dart 和 Flutter 擴充功能新增至 VS Code，請造訪Flutter 擴充功能的 Marketplace 頁面，然後按一下「安裝」。如果瀏覽器提示，請允許其開啟 VS Code。

3. 使用 VS Code 安裝 Flutter

   1. 在 VS Code 中開啟命令面板。

      前往“視圖” > “命令面板” 或按Control+ Shift+ P。

   2. 在命令面板中，輸入flutter.

   3. 選擇Flutter：新項目。

   4. VS Code 會提示您在電腦上尋找 Flutter SDK。選擇“下載 SDK”。

   5. 當顯示「選擇 Flutter SDK 資料夾」對話方塊時，選擇要安裝 Flutter 的位置。

   6. 點擊克隆 Flutter。

      在下載 Flutter 時，VS Code 會顯示以下彈出通知：

      Downloading the Flutter SDK. This may take a few minutes.
      

      此下載過程需要幾分鐘。如果您懷疑下載卡住了，請點擊「取消」，然後重新開始安裝。

   7. 點擊“將 SDK 新增至 PATH”。

      成功後，將顯示通知：

      The Flutter SDK was added to your PATH
      

   8. VS Code 可能會顯示 Google Analytics 通知。

      如果您同意，請點選確定。

   9. 為了確保 Flutter 在所有終端機中都可用：

      1. 關閉所有終端機窗口，然後重新開啟。
      2. 重啟 VS Code。
   筆記

   VS Code 安裝程序可能會檢查 Android Studio 是否已安裝，如果未安裝，則會發出警告。如果您面向的是其他平台（例如 Web、iOS 或 macOS），則可以忽略此警告，因為安裝仍然會成功。安裝完成後，執行命令flutter doctor驗證安裝是否成功。

4. 排查安裝問題

   如果在安裝過程中遇到任何問題，請查看Flutter 安裝故障排除。

試試 Flutter

現在你已經設定好了 VS Code 和 Flutter，是時候創建一個應用程式並嘗試 Flutter 開發了！

1. 建立一個新的 Flutter 應用

   1. 在 VS Code 中開啟命令面板。

      前往“視圖” > “命令面板” 或按Control+ Shift+ P。

   2. 在命令面板中，開始輸入flutter:。

      VS Code 應該會顯示 Flutter 外掛程式中的命令。

   3. 選擇Flutter：新專案指令。

      您的作業系統或 VS Code 可能會要求存取您的文檔，請同意以繼續下一步。

   4. 選擇申請範本。

      VS Code 會提示您「選擇哪個 Flutter 範本？」。選擇“Application”範本即可快速建立一個簡單的計數器應用程式。

   5. 建立或選擇新應用程式資料夾的父目錄。

      應該會彈出一個文件對話框。

      1. 選擇或建立要建立專案的父目錄。
      2. 若要確認您的選擇，請按一下「選擇要建立項目的資料夾」。

   6. 請輸入您的應用程式名稱。

      VS Code 會提示您輸入新套用的名稱。輸入“app”trying_flutter或類似lowercase_with_underscores 名稱。若要確認您的選擇，請按 Enter 鍵Enter。

   7. 等待項目初始化完成。

      任務進度通常會以通知的形式顯示在右下角，也可以從「輸出」面板存取。

   8. 開啟lib目錄，然後main.dart開啟檔案。

      如果您想了解程式碼的每個部分的作用，請查看文件中前面的註釋。

2. 在網頁上執行您的應用

   雖然 Flutter 應用程式可以在許多平台上運行，但請嘗試在 Web 上運行您的新應用程式。

   1. 在 VS Code 中開啟命令面板。

      前往“視圖” > “命令面板” 或按Control+ Shift+ P。

   2. 在命令面板中，開始輸入flutter:。

      VS Code 應該會顯示 Flutter 外掛程式中的命令。

   3. 選擇Flutter: 選擇設備指令。

   4. 在「選擇設備」提示中，選擇Chrome。

   5. 運行或開始調試您的應用程式。

      前往“運行” > “開始調試”或按F5。

      flutter run用於建置和啟動您的應用程序，然後應該會打開一個新的 Chrome 實例並開始運行您新創建的應用程式。

3. 嘗試熱重載

   Flutter 提供快速的開發週期，並具備狀態熱重載功能，能夠在不重新啟動應用或遺失應用程式狀態的情況下重新載入正在執行的應用程式的程式碼。

   您可以變更應用程式的原始程式碼，在 VS Code 中執行熱重載命令，然後在正在執行的應用程式中查看變更。

   1. 在跑步應用程式中，點擊按鈕嘗試幾次增加計數器 。

   2. 在應用程式仍在運行的情況下，對文件進行更改lib/main.dart。

      修改方法_counter++中的那行程式碼_incrementCounter，改為遞減該_counter欄位的值。

      setState(() {
        // ...
        _counter++;
        _counter--;
      });
      

   3. 儲存變更（檔案 > 全部儲存）或點選熱重載  按鈕。

      Flutter 會在不遺失任何現有狀態的情況下更新正在執行的應用程式。請注意，現有值保持不變。

   4. 再點擊  一次按鈕。你會發現數值反而減少了，而不是增加了。

4. 瀏覽 Flutter 側邊欄

   Flutter 外掛程式為 VS Code 新增了一個專用的側邊欄，用於管理 Flutter 偵錯會話和設備，查看程式碼和元件的概要，以及存取 Dart 和 Flutter DevTools。

   1. 如果你的應用程式無法運行，請重新開始調試。

      前往“運行” > “開始調試”或按F5。

   2. 在 VS Code 中開啟 Flutter 側邊欄。

      您可以使用 VS Code 側邊欄中的 Flutter 按鈕打開它，也可以透過執行Flutter: Focus on Flutter Sidebar View命令 從命令面板打開它。

   3. 在 Flutter 側邊欄的「開發者工具」下，點選Flutter Inspector按鈕。

      VS Code 中應該會開啟一個單獨的Widget Inspector面板。

      在元件檢查器中，您可以查看應用程式的元件樹，查看每個元件的屬性和佈局等等。

   4. 在組件檢查器中，嘗試按一下頂層MyHomePage組件。

      應該打開其屬性和佈局的視圖，並且 VS Code 編輯器應該導航到並聚焦到包含該小部件的行。

   5. 探索並嘗試小部件檢查器和 Flutter 側邊欄中的其他功能。