設定與試用 | Flutter 框架

瞭解如何使用 VS Code 設定您的 Flutter 開發環境並試用 Flutter 的開發者體驗。

本頁上的說明已配置為涵蓋在 Windows 裝置上安裝和試用 Flutter。

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

為獲得最順暢的 Flutter 設定體驗，請先安裝以下工具。

設定 Linux 支援
如果你之前未在 Chromebook 上設定 Linux 支援，請開啟 Linux 支援。
如果你已經開啟了 Linux 支援，請按照解決 Linux 問題的說明進行更新。
下載並安裝先決軟體包
使用 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
```
下載並安裝 Visual Studio Code
要快速安裝 Flutter，然後編輯和除錯您的應用，請安裝並設定 Visual Studio Code。

安裝 Xcode 命令列工具
下載 Xcode 命令列工具以訪問 Flutter 依賴的命令列工具，包括 Git。
要下載這些工具，請在你喜歡的終端中執行以下命令
```
xcode-select --install
```
如果你尚未安裝這些工具，將彈出一個對話方塊，確認你是否要安裝它們。單擊安裝，安裝完成後，單擊完成。
下載並安裝 Visual Studio Code
要快速安裝 Flutter，然後編輯和除錯您的應用，請安裝並設定 Visual Studio Code。

安裝適用於 Windows 的 Git
下載並安裝最新版適用於 Windows 的 Git。
有關安裝或故障排除 Git 的幫助，請參閱 Git 文件。
下載並安裝 Visual Studio Code
要快速安裝 Flutter，然後編輯和除錯您的應用，請安裝並設定 Visual Studio Code。

下載並安裝先決軟體包
使用你偏好的包管理器或機制，安裝以下軟體包的最新版本
- 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
```
下載並安裝 Visual Studio Code
要快速安裝 Flutter，然後編輯和除錯您的應用，請安裝並設定 Visual Studio Code。

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

啟動 VS Code
如果 VS Code 未開啟，請透過 Spotlight 搜尋或從安裝目錄手動開啟它來開啟 VS Code。
將 Flutter 擴充套件新增到 VS Code
要將 Dart 和 Flutter 擴充套件新增到 VS Code，請訪問Flutter 擴充套件的市場頁面，然後點選安裝。如果瀏覽器提示您，請允許它開啟 VS Code。
使用 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.
```
  此下載需要幾分鐘時間。如果您懷疑下載已卡住，請點選取消，然後重新開始安裝。
7. 點選新增 SDK 到 PATH。
  成功時，會顯示通知
```
The Flutter SDK was added to your PATH
```
8. VS Code 可能會顯示 Google Analytics 通知。
  如果你同意，點選確定。
9. 確保 Flutter 在所有終端中都可用
  1. 關閉，然後重新開啟所有終端視窗。
  2. 重新啟動 VS Code。
驗證您的設定
要確保您已正確安裝 Flutter，請在您偏好的終端中執行 flutter doctor -v。
如果命令未找到或出現錯誤，請檢視Flutter 安裝疑難解答。

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

建立一個新的 Flutter 應用
1. 在 VS Code 中開啟命令面板。
  轉到檢視>命令面板或按Cmd/Ctrl + Shift + P。
2. 在命令面板中，開始鍵入 flutter:。
  VS Code 應該會顯示來自 Flutter 外掛的命令。
3. 選擇 Flutter: New Project 命令。
  您的作業系統或 VS Code 可能會請求訪問您的文件，請同意以繼續下一步。
4. 選擇 Application 模板。
  VS Code 應該會提示您選擇哪個 Flutter 模板？。選擇Application 來引導一個簡單的計數器應用。
5. 為新應用資料夾建立或選擇父目錄。
  應該會出現一個檔案對話方塊。
  1. 選擇或建立您想要建立專案的父目錄。
  2. 要確認您的選擇，請點選選擇一個資料夾來建立專案。
6. 為您的應用輸入名稱。
  VS Code 應該會提示您輸入新應用的名稱。輸入 trying_flutter 或類似的 小寫_帶下劃線 名稱。要確認您的選擇，請按 Enter。
7. 等待專案初始化完成。
  任務進度通常會顯示在右下角的通知中，也可以從Output面板訪問。
8. 開啟 lib 目錄，然後開啟 main.dart 檔案。
  如果您想知道程式碼的每個部分的作用，請檢視檔案中前面的註釋。
在 Web 上執行您的應用
雖然 Flutter 應用可以在許多平臺上執行，但請嘗試在 Web 上執行您的新應用。
1. 在 VS Code 中開啟命令面板。
  轉到檢視>命令面板或按Cmd/Ctrl + Shift + P。
2. 在命令面板中，開始鍵入 flutter:。
  VS Code 應該會顯示來自 Flutter 外掛的命令。
3. 選擇 Flutter: Select Device 命令。
4. 在Select Device提示中，選擇Chrome。
5. 執行或開始除錯您的應用。
  轉到Run > Start Debugging 或按 F5。
  flutter run 用於構建和啟動您的應用，然後會開啟一個新的 Chrome 例項並開始執行您新建立的應用。
嘗試熱過載
Flutter 提供了一個快速的開發週期，具有有狀態熱過載功能，可以在不重新啟動或丟失應用狀態的情況下重新載入即時執行的應用的程式碼。
您可以更改應用的原始碼，在 VS Code 中執行熱過載命令，然後在執行的應用中看到更改。
1. 在執行的應用中，嘗試透過單擊按鈕來多次增加計數器。
2. 在應用仍在執行時，對 lib/main.dart 檔案進行更改。
  將 _incrementCounter 方法中的 _counter++ 行更改為遞減 _counter 欄位。
  dart
```
setState(() {
  // ...
  _counter++;
  _counter--;
});
```
3. 儲存您的更改（File > Save All）或點選Hot Reload 按鈕。
  Flutter 在不丟失任何現有狀態的情況下更新執行的應用。請注意，現有值保持不變。
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 命令來開啟它。
3. 如果您的應用未執行，請重新開始除錯。
  轉到Run > Start Debugging 或按 F5。
4. 在 Flutter 側邊欄的 DevTools 下，點選 Flutter Inspector 按鈕。
  VS Code 中應該會開啟一個單獨的Widget Inspector面板。
  在 widget 檢查器中，您可以檢視應用的小部件樹，檢視每個小部件的屬性和佈局，等等。
5. 在 widget 檢查器中，嘗試點選頂層的 MyHomePage widget。
  它應該會開啟其屬性和佈局的檢視，並且 VS Code 編輯器應該會導航並聚焦到包含該 widget 的行。
6. 探索並嘗試 widget 檢查器和 Flutter 側邊欄中的其他功能。