設定並試用 Flutter

瞭解如何使用任何基於 Code OSS 的編輯器（如 VS Code）來設定 Flutter 開發環境，並體驗 Flutter 的開發流程。

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

本頁說明適用於在 Windows 裝置上安裝和試用 Flutter。

如果你想遵循其他作業系統的說明，請選擇以下之一。

Windows

macOS

Linux

ChromeOS

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

1. 設定 Linux 支援

   如果你之前未在 Chromebook 上設定 Linux 支援，請開啟 Linux 支援。

   如果你已經開啟了 Linux 支援，請按照解決 Linux 問題的說明進行更新。

2. 下載並安裝先決軟體包

   使用 apt-get 或你喜歡的安裝機制，安裝以下軟體包的最新版本

   • curl
   • git
   • unzip
   • xz-utils
   • zip
   • libglu1-mesa

   如果你想使用 apt-get，請使用以下命令安裝這些軟體包

   $ sudo apt-get update -y && sudo apt-get upgrade -y
   $ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
   

   content_copy

3. 下載並安裝 Visual Studio Code

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

   您可以安裝並使用任何其他支援 VS Code 擴充套件的基於 Code OSS 的編輯器。如果您這樣做，在本文的後續部分，請將 VS Code 理解為您所選擇的編輯器。

1. 安裝 git

   如果您已經安裝了 git，請跳至下一步：下載並安裝 Visual Studio Code。

   在 Mac 上安裝 git 有多種方法，我們建議使用 XCode。這對您後續構建 iOS 或 macOS 目標應用非常重要。

   $ xcode-select --install
   

   content_copy

   如果你尚未安裝這些工具，將彈出一個對話方塊，確認你是否要安裝它們。單擊 安裝，安裝完成後，單擊 完成。

2. 下載並安裝 Visual Studio Code

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

   您可以安裝並使用任何其他支援 VS Code 擴充套件的基於 Code OSS 的編輯器。如果您這樣做，在本文的後續部分，請將 VS Code 理解為您所選擇的編輯器。

1. 安裝適用於 Windows 的 Git

   下載並安裝最新版適用於 Windows 的 Git。

   有關安裝或故障排除 Git 的幫助，請參閱 Git 文件。

2. 下載並安裝 Visual Studio Code

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

   您可以安裝並使用任何其他支援 VS Code 擴充套件的基於 Code OSS 的編輯器。如果您這樣做，在本文的後續部分，請將 VS Code 理解為您所選擇的編輯器。

1. 下載並安裝先決軟體包

   使用你偏好的包管理器或機制，安裝以下軟體包的最新版本

   • curl
   • git
   • unzip
   • xz-utils
   • zip
   • libglu1-mesa

   在基於 Debian 的發行版（如 Ubuntu）上，使用 apt-get，請使用以下命令安裝這些軟體包

   $ sudo apt-get update -y && sudo apt-get upgrade -y
   $ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
   

   content_copy

2. 下載並安裝 Visual Studio Code

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

   您可以安裝並使用任何其他支援 VS Code 擴充套件的基於 Code OSS 的編輯器。如果您這樣做，在本文的後續部分，請將 VS Code 理解為您所選擇的編輯器。

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

1. 啟動 VS Code

   如果尚未開啟，請透過 Spotlight 搜尋或從安裝目錄手動開啟 VS Code。

2. 將 Flutter 擴充套件新增到 VS Code

   要將 Dart 和 Flutter 擴充套件新增到 VS Code，請訪問 Flutter 擴充套件市場頁面，然後單擊 Install（安裝）。如果瀏覽器提示，請允許其開啟 VS Code。

3. 使用 VS Code 安裝 Flutter

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

      轉到檢視>命令面板或按Cmd/Ctrl + 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.
      

      content_copy

      此下載需要幾分鐘。如果您懷疑下載已掛起，請單擊取消，然後再次開始安裝。

   7. 點選新增 SDK 到 PATH。

      成功時，會顯示通知

      The Flutter SDK was added to your PATH
      

      content_copy

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

      如果你同意，點選確定。

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

      1. 關閉，然後重新開啟所有終端視窗。
      2. 重新啟動 VS Code。

4. 排查安裝問題

   如果您在安裝過程中遇到任何問題，請檢視 Flutter 安裝排查指南。

既然您已經設定好了 VS Code 和 Flutter，現在是時候建立一個應用並嘗試 Flutter 開發了！

1. 建立一個新的 Flutter 應用

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

      轉到檢視>命令面板或按Cmd/Ctrl + Shift + P。

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

      VS Code 應該會顯示來自 Flutter 外掛的命令。

   3. 選擇 Flutter: New Project（Flutter：新建專案） 命令。

      您的作業系統或 VS Code 可能會請求訪問您的文件，請同意以繼續下一步。

   4. 選擇 Application（應用） 模板。

      VS Code 會提示您 Which Flutter template?（使用哪個 Flutter 模板？）。選擇 Application（應用） 以引導一個簡單的計數器應用。

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

      應該會出現一個檔案對話方塊。

      1. 選擇或建立您想要在其中建立專案的父目錄。
      2. 要確認您的選擇，請單擊 Select a folder to create the project in（選擇用於建立專案的資料夾）。

   6. 輸入應用的名稱。

      VS Code 會提示您輸入新應用的名稱。輸入 trying_flutter 或類似的 lowercase_with_underscores（小寫字母加下劃線） 名稱。按下 Enter 確認您的選擇。

   7. 等待專案初始化完成。

      任務進度通常會以右下角的通知形式顯示，也可以從 Output（輸出） 面板中檢視。

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

      如果您對程式碼各部分的功能感到好奇，請檢視檔案中貫穿始終的註釋。

2. 在 Web 上執行您的應用

   雖然 Flutter 應用可以在許多平臺上執行，但請嘗試在 Web 上執行您的新應用。

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

      轉到檢視>命令面板或按Cmd/Ctrl + Shift + P。

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

      VS Code 應該會顯示來自 Flutter 外掛的命令。

   3. 選擇 Flutter: Select Device（Flutter：選擇裝置） 命令。

   4. 在 Select Device（選擇裝置） 提示中，選擇 Chrome。

   5. 執行或開始除錯您的應用。

      前往 Run（執行） > Start Debugging（開始除錯） 或按 F5。

      flutter run 用於構建並啟動您的應用，之後應該會開啟一個新的 Chrome 例項並開始執行您剛建立的應用。

3. 嘗試熱過載 (Hot Reload)

   Flutter 提供了一個快速的開發週期，即 有狀態熱過載 (stateful hot reload)，它能夠重新整理正在執行的應用程式碼，而無需重啟或丟失應用狀態。

   您可以更改應用的原始碼，在 VS Code 中執行熱過載命令，然後在執行中的應用中檢視更改。

   1. 在執行的應用中，透過單擊 按鈕嘗試多次增加計數器。

   2. 在應用保持執行的同時，對 lib/main.dart 檔案進行更改。

      將 _incrementCounter 方法中的 _counter++ 行修改為遞減 _counter 欄位。

      dart

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

      content_copy

   3. 儲存您的更改（File（檔案） > Save All（儲存全部））或單擊 Hot Reload（熱過載） 按鈕。

      Flutter 會更新執行中的應用，而不會丟失任何現有狀態。注意，現有的數值保持不變。

   4. 嘗試再次單擊 按鈕。注意，數值現在遞減而不是遞增。

4. 探索 Flutter 側邊欄

   Flutter 外掛在 VS Code 中添加了一個專門的側邊欄，用於管理 Flutter 除錯會話和裝置、檢視程式碼和元件 (widget) 的大綱，以及訪問 Dart 和 Flutter DevTools。

   1. 如果您的應用沒有執行，請再次開始除錯。

      前往 Run（執行） > Start Debugging（開始除錯） 或按 F5。

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

      可以透過 VS Code 側邊欄中的 Flutter 按鈕開啟，或者從命令面板執行 Flutter: Focus on Flutter Sidebar View（Flutter：聚焦於 Flutter 側邊欄檢視） 命令開啟。

   3. 在 Flutter 側邊欄的 DevTools 下，單擊 Flutter Inspector（Flutter 檢查器） 按鈕。

      VS Code 中應該會開啟一個單獨的 Widget Inspector（元件檢查器） 面板。

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

   4. 在元件檢查器中，嘗試單擊頂級 MyHomePage 元件。

      其屬性和佈局的檢視應該會開啟，VS Code 編輯器會自動導航並聚焦到包含該元件的那一行程式碼。

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

恭喜！ 現在您已經安裝並試用了 Flutter，請遵循 Flutter 學習路徑，為其他目標平臺設定開發環境，或者瀏覽以下部分資源以繼續您的 Flutter 學習之旅。

構建其他平臺應用

• 目標 Android
• 目標 iOS
• 面向 macOS
• 面向 Windows
• 面向 Linux

學習 Flutter 開發

• 學習基礎知識
• 探索 Flutter 元件
• 探索學習資源
• 學習 Dart 程式設計 open_in_new

保持 Flutter 更新

• 更新 Flutter
• 瞭解最新動態
• 檢視部落格 open_in_new
• 訂閱 YouTube 頻道 open_in_new
• 在 Bluesky 上關注我們 open_in_new