設定並試駕 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

   如果你尚未安裝這些工具， 應該會開啟一個對話框，確認你是否要安裝。 點擊 Install，安裝完成後點擊 Done。

2. 下載並安裝 Visual Studio Code

   若要快速安裝 Flutter，並在之後編輯和除錯你的應用程式， 請安裝並設定 Visual Studio Code。

   你也可以改為安裝並使用任何其他支援 VS Code 擴充功能的 Code OSS 編輯器。 若選擇如此，在本文的其餘部分， 請將 VS Code 視為你所選擇的編輯器。

1. 安裝 Git for Windows

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

   如需安裝或疑難排解的協助， 請參閱 Git 文件。

2. 下載並安裝 Visual Studio Code

   若要快速安裝 Flutter，並在之後編輯和除錯你的應用程式， 請安裝並設定 Visual Studio Code。

   你也可以改為安裝並使用任何其他支援 VS Code 擴充功能的 Code OSS 編輯器。 若選擇如此，在本文的其餘部分， 請將 VS Code 視為你所選擇的編輯器。

1. 下載並安裝必要套件

   使用你偏好的套件管理器或安裝方式， 安裝以下套件的最新版本：

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

   在使用 apt-get 的 Debian 系發行版（例如 Ubuntu）上， 請以下列指令安裝這些套件：

   $ 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 擴充功能的 Marketplace 頁面， 然後點擊 Install。 如果你的瀏覽器提示，請允許它開啟 VS Code。

3. 使用 VS Code 安裝 Flutter

   1. 在 VS Code 中開啟指令面板（Command Palette）。

      前往 View > Command Palette 或按下 Cmd/Ctrl + Shift + P。

   2. 在指令面板中，輸入 flutter。

   3. 選取 Flutter: New Project。

   4. VS Code 會提示你指定電腦上 Flutter SDK 的位置。 選取 Download SDK。

   5. 當 Select Folder for Flutter SDK 對話框出現時， 選擇你想要安裝 Flutter 的位置。

   6. 點擊 Clone Flutter。

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

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

      content_copy

      此下載需要數分鐘。 如果你懷疑下載已停頓，請點擊 Cancel，然後 重新開始安裝。

   7. 點擊 Add SDK to PATH。

      成功後，會顯示以下通知：

      The Flutter SDK was added to your PATH
      

      content_copy

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

      如果你同意，請點擊 OK。

   9. 確認 Flutter 可在所有終端機中使用：

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

4. 疑難排解安裝問題

   如果你在安裝過程中遇到任何問題， 請參閱 Flutter 安裝疑難排解。

現在您已設定好 VS Code 與 Flutter， 是時候建立一個應用程式並試試 Flutter 開發了！

1. 建立一個新的 Flutter 應用程式

   1. 在 VS Code 中開啟指令面板 (Command Palette)。

      前往 View > Command Palette 或按下 Cmd/Ctrl + Shift + P。

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

      VS Code 應該會顯示來自 Flutter 插件的指令。

   3. 選擇 Flutter: New Project 指令。

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

   4. 選擇 Application 範本 (template)。

      VS Code 應該會以 Which Flutter template? 提示您。 選擇 Application 以建置 (bootstrap) 一個簡單的計數器應用程式。

   5. 為您的新應用程式資料夾建立或選擇上層目錄 (parent directory)。

      此時應該會出現一個檔案對話框。

      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. 在網頁上執行您的應用程式

   雖然 Flutter 應用程式可以在許多平台上執行， 先試著在網頁上執行您的新應用程式吧。

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

      前往 View > Command Palette 或按下 Cmd/Ctrl + Shift + P。

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

      VS Code 應該會顯示來自 Flutter 插件的指令。

   3. 選擇 Flutter: Select Device 指令。

   4. 在 Select Device 提示中，選擇 Chrome。

   5. 執行或開始對應用程式進行除錯。

      前往 Run > Start Debugging 或按下 F5。

      flutter run 用於建置 (build) 並啟動您的應用程式， 接著會開啟一個新的 Chrome 視窗， 並開始執行您新建立的應用程式。

3. 試試熱重載 (Hot Reload)

   Flutter 透過有狀態熱重載 (stateful hot reload) 提供快速的開發週期， 讓您無需重新啟動或遺失應用程式狀態 (app state)， 即可重新載入正在執行的應用程式程式碼。

   您可以變更應用程式的原始碼， 在 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 側邊欄。

      可透過側邊欄中的 Flutter 按鈕開啟， 或在指令面板中執行 Flutter: Focus on Flutter Sidebar View 指令來開啟。

   3. 在 Flutter 側邊欄的 DevTools 下， 點擊 Flutter Inspector 按鈕。

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

      在元件檢視器 (widget inspector) 中，您可以檢視應用程式的元件樹 (widget tree)、 查看每個元件的屬性與版面配置，以及更多功能。

   4. 在元件檢視器中，試著點擊頂層的 MyHomePage 元件。

      應該會開啟其屬性與版面配置的檢視， VS Code 編輯器也會導覽並聚焦到 包含該元件的那一行程式碼。

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

恭喜！ 您已安裝並試用 Flutter， 接下來可以遵循 Flutter 學習路徑、 設定其他目標平台的開發環境， 或探索以下資源繼續您的 Flutter 學習之旅。

Build for other platforms

• Target Android
• Target iOS
• Target macOS
• Target Windows
• Target Linux

Learn Flutter development

• Learn the fundamentals
• Discover Flutter widgets
• Explore learning resources
• Learn Dart programming open_in_new

Stay up to date with Flutter

• Update Flutter
• Find out what's new
• Check out the blog open_in_new
• Subscribe on YouTube open_in_new
• Follow on Bluesky open_in_new