Stories

Detail

Return

Flutter學習筆記：開發環境搭建 - Stories Detail

06:55 AM · Nov 07 ,2025

本文更新於2024-12-15，使用Flutter 3.3.3，操作系統為Windows 10。

安裝Flutter

下載Flutter。官網下載頁面為：https://docs.flutter.dev/get-started/install/windows。

本文使用的版本的下載地址為：https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_3.3.3-stable.zip。
解壓zip文件。

生成的默認目錄名為flutter_windows_3.3.3-stable，下文記為$FLUTTER。
設置環境變量Path。

將$FLUTTER/flutter/bin的絕對路徑加入環境變量Path。此目錄下有可執行程序dart和flutter，可以運行以下命令查看環境變量是否正確設置：
```
dart --version
flutter --version [--verbose]
```
進行自檢。

如配置不正確或缺少組件，則會有相應提示。還會為運行做首次配置。這一過程耗時較長。
```
flutter doctor
```

環境變量

FLUTTER_STORAGE_BASE_URL

Flutter命令

flutter analyze：運行代碼分析器。
flutter build apk|ios：編譯Android/iOS的APK。
flutter create [-a kotlin] [-i swift] PROJECT：創建項目。
flutter doctor：自檢。
flutter doctor --android-license：同意Android SDK的許可協議。
flutter drive --target=FILENAME：運行集成測試。如為相對路徑，則以項目目錄為根。
flutter logs：查看日誌。
flutter packages get：獲取項目的依賴庫。
flutter packages upgrade：升級項目的依賴庫至最新版本。
flutter run [-d chrome --web-renderer html|canvaskit] [--trace-startup --profile]：運行項目。輸入r可進行熱修復。--trace-startup --profile用於啓動時間分析，但不能使用虛擬設備。
flutter test [FILENAME]：運行單元測試和組件測試。如為相對路徑，則以項目目錄為根；若不指定文件，則運行所有測試。
flutter upgrade：升級。升級完後自動執行自檢。

使用Android Studio開發

本文使用Android Studio 2021.3.1。

安裝Android Studio

下載Android Studio。官網下載頁面為：https://developer.android.google.cn/studio/。

本文使用的版本的下載地址為：https://redirector.gvt1.com/edgedl/android/studio/install/2021.3.1.16/android-studio-2021.3.1.16-windows.exe
安裝Android Studio。
啓動Android Studio。第一次啓動時會進行一些配置，並下載一些文件。

“Verify Settings”界面會列出所有的配置項，“SDK Components to Download”項如為空，則可能需修改host文件，增加一行：
```
203.208.40.97 dl.google.com
```

Android Studio安裝插件

安裝Flutter插件，會自動安裝Dart插件。

安裝完成需要重啓Android Studio，會出現“New Flutter Project”選項。

Android Studio運行項目

創建虛擬設備。

在虛擬設備管理器“Virtual Device Manager”中創建虛擬設備。
創建Flutter項目。

使用“New Flutter Project”創建項目，選擇“Flutter”並填寫“Flutter SDK path”（即$FLUTTER/flutter的絕對路徑），創建的時候可能耗時較長。“Project Name”必需以小寫開頭，且不可有空格。如“Platforms”勾選了“Web”，則可以使用瀏覽器作為虛擬設備。
運行項目。

選擇一個虛擬設備，入口點默認為main.dart文件，點擊綠色三角形按鈕，編譯並在虛擬設備上運行。這一過程耗時較長。默認的程序是一個點擊計數器。

使用VSCode開發

本文使用VSCode 1.71.2。

安裝VSCode

VSCode安裝插件

在VSCode擴展中安裝Flutter插件，會自動安裝Dart插件。

VSCode運行項目

創建Flutter項目。

使用快捷鍵Ctrl+Shift+P，選擇“Flutter: New Project”創建項目。

“Application”為創建應用程序項目。
選擇設備。

使用快捷鍵Ctrl+Shift+P，選擇“Flutter: Select Device”，再選擇對應的設備。
運行項目。

點擊VSCode右上方的三角形圖標，選擇“Start Debugging”開始調試，或選擇“Run Without Debugging”直接運行不調試。這一過程耗時較長，默認的應用程序是一個點擊計數器。

可使用快捷鍵Ctrl+Shift+D打開“運行和調試”面板，選擇對應的配置。
熱重載。

點擊黃色閃電圖標或快捷鍵Ctrl+F5，可進行熱重載。

配置.vscode/launch.json

如需對VSCode項目進行配置，則在項目目錄下創建.vscode/launch.json（或在“運行和調試”面板快速創建）。文件內容示例如下：

{
	// 使用 IntelliSense 瞭解相關屬性。 
	// 懸停以查看現有屬性的描述。
	// 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"name": "testdemo",
			"request": "launch",
			"type": "dart",
			// "args": ["--web-renderer html"]
		}
	]
}

flutter