Flutter 是 Google 開發的開發框架，底層採用 Google 自有的 Dart 程式語言。僅需維護一套程式碼，就能建置 Web、iOS、Android、Linux、Windows 甚至嵌入式裝置專用應用程式。同類型跨平台開發框架還有微軟的 MAUI、PHP 開發者適用的 NativePHP。
Flutter 採用開源授權，能透過單一程式碼基底建置美觀、原生編譯的跨平台應用，現今許多開發人員都使用它開發 Android App。
Flutter 可直接編譯為原生機器碼，因此使用它開發的軟體不易被反編譯；會輸出最佳化的 ARM、Intel 機器碼與 JavaScript，確保在各種裝置上都能流暢執行。
完整支援行動裝置、網頁、桌面程式與嵌入式應用開發。
Google 旗下服務可無縫整合至 Flutter
串接 Google 完整的應用開發生態系，可與 Firebase、Google Ads、Google Play、Google Pay、Google Wallet、Google 地圖等服務無縫整合，簡化開發流程，接觸更多使用者。
Flutter 以 Dart 語言做為開發基礎，這門語言專為各平台快速建置應用做最佳化設計。
Flutter 官方網站：Flutter – 為任何裝置畫面建置應用
安裝流程
Flutter 支援多種作業系統，以下列出的系統皆可進行 Flutter 開發。
本教學將以 Windows 系統做示範。
架設 Flutter 開發環境前，需先安裝數項必備前置工具。
- 安裝 Windows 版 Git
可前往 Git 官方網站下載安裝檔：Git – Windows 安裝程式
作者使用 Intel 64 位元 Windows，因此下載此版本安裝檔：Windows 64 位元 Git 安裝程式。
Git 安裝流程十分簡單，和一般 Windows 軟體安裝步驟大同小異，全程只需持續點選「Next」即可。
- 下載並安裝 Visual Studio Code
Flutter 同時支援 VS Code 與 Android Studio，讀者可依照自身使用習慣挑選開發工具。作者習慣使用 Android Studio，因此本課程全程以 Android Studio 做示範。可至 Android Studio 官網取得最新版本：https://developer.android.com/studio
安裝 Flutter 主程式
前面安裝的都是開發所需的前置工具，接下來才要安裝 Flutter 框架本身。必須先安裝 Flutter 框架，才能使用它開發專案。若你使用 VS Code 開發，可參考其他教學，VS Code 內建一鍵安裝 Flutter 的功能，可直接在 VS Code 安裝 Flutter。
在 VS Code 安裝 Flutter 與 Dart 的步驟，和安裝其他擴充功能相同，只需在擴充市集搜尋 Flutter、Dart 並安裝。
若要在 VS Code 新增 Dart 與 Flutter 擴充，請開啟Flutter 擴充市集頁面，點擊安裝按鈕。若瀏覽器詢問是否允許開啟 VS Code，請允許。也可參考官方文件教學：快速上手 Flutter
但本課程不使用 VS Code，因此我們採手動安裝方式。
手動安裝 Flutter 步驟
本次手動安裝流程參考官方文件：https://docs.flutter.dev/install/manual
開啟上方連結後，選擇對應自身作業系統的安裝檔，本篇示範以 Windows 為例。
點擊下載按鈕取得壓縮檔。
下載完成後，將壓縮檔解壓縮至路徑不含空格、特殊符號的資料夾，建議路徑越簡單越好，例如C:\flutter
解壓縮後的資料夾結構如下：
複製 bin 完整路徑：C:\flutter\bin，並新增至系統環境變數 Path。
開啟開始功能表，搜尋「編輯系統環境變數」。
將剛才複製的 bin 資料夾路徑新增至 Path 清單。
安裝 Dart SDK
Flutter 安裝完畢後，還需要 Dart SDK，開啟終端機執行以下指令。
flutter doctor執行後會自動下載 Dart SDK。
C:\Users\Jack>flutter doctor
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Expanding downloaded archive with PowerShell...Code language: JavaScript (javascript)接著驗證安裝是否成功，開啟 CMD 執行相同指令。
備註：部分地區網路環境會導致下載失敗，需設定鏡像代理。開啟 CMD 或 PowerShell，依序執行下方指令。
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter doctorCode language: JavaScript (javascript)
最後執行的 flutter doctor 是 Flutter 環境檢測工具，顧名思義就像醫生一樣，全面掃描開發環境是否完整。
作者執行檢測後的輸出結果如下：
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [ 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT LTSC 64 位, 21H2, 2009)
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/to/windows-android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.1)
[√] Connected device (2 available)
[!] Network resources
X An HTTP error occurred while checking "https://github.com/": 連線逾時
! Doctor found issues in 3 categories.Code language: JavaScript (javascript)標示 X 的項目代表未安裝或設定異常：例如缺少 Android SDK 就無法編譯 Android 安裝檔；未安裝 Chrome 則不能除錯 Web 專案。後續章節會教學安裝 Android Studio；Chrome 可自行下載安裝。若只開發 Windows 桌面應用，這兩項可省略不安裝。
缺少 Android SDK（無法編譯 Android 版本）
偵測不到 Chrome（無法除錯 Web 專案）
Chrome 官方下載網址：Google Chrome – 下載快速安全的瀏覽器
安裝 Android Studio
作者下載最新 Windows 安裝檔：android-studio-quail1-patch1-windows.exe，雙擊即可執行安裝。
安裝流程同樣全程點選 Next 即可。
安裝完成後開啟軟體，初始設定精靈也一路點 Next。
全部元件安裝完畢後，就能在 Android Studio 建立 Flutter 專案。
重新開啟 CMD，執行 flutter doctor 再次檢查環境。
[!] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
X cmdline-tools component is missing.
Try installing or updating Android Studio.
Alternatively, download the tools from https://developer.android.com/studio#command-line-tools-only and make sure
to set the ANDROID_HOME environment variable.
See https://developer.android.com/studio/command-line for more details.
X Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/to/windows-android-setup for more details.Code language: PHP (php)開啟 Android Studio，依序點擊 File → Settings → Appearance & Behavior → System Settings → Android SDK
切換至 SDK Tools 分頁，勾選以下項目：
Android SDK Command-line Tools (latest)
維持在 SDK Tools 標籤頁，勾選：
Android SDK Command-line Tools (latest)
點擊 Apply，等待工具自動下載並安裝。
安裝完畢後再次執行 flutter doctor。
[!] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licensesCode language: CSS (css)此警告代表尚未同意 Android SDK 使用授權。
Android 授權未確認（Some Android licenses not accepted）
在 CMD 執行下方指令：
flutter doctor --android-licenses出現授權確認提示時，全部輸入 Y 並按下 Enter。
再次於命令列執行 flutter doctor 確認環境。
C:\Users\Jack>flutter doctor
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [版本 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT 企業版 LTSC 64 位, 21H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.1)
[√] Connected device (3 available)
[√] Network resources
• No issues found!Code language: JavaScript (javascript)
至此 Flutter 開發環境已完整安裝完成，下一堂課我們將實作第一支 Flutter 範例專案。