Flutter 學習紀錄 - Day 1 安裝與介紹

什麼是Flutter

https://flutter.dev/

Flutter 是由 Google 開發的一個開源框架，使用 Dart 程式語言寫一份Code可以同時讓iOS與Android平台使用，也支援Web以及桌面應用程式。

主要特點如下：

主要特點

跨平台：

Flutter 允許開發者使用單一代碼庫同時構建 Android 和 iOS 應用，甚至可以用於網頁和桌面應用的開發。

高性能：

由於 Flutter 直接編譯成原生代碼，因此性能優越，可以達到原生應用的流暢度。

豐富的組件庫：

提供了大量的預製組件（Widgets），這些組件可以高度定制，滿足不同設計需求。

熱重載：

Flutter 支持熱重載（Hot Reload），使得開發者可以快速查看代碼修改結果，大幅提升開發效率。

單一代碼語言：

使用 Dart 編程語言，簡化了開發過程，特別是對於那些需要同時支持多個平台的應用。

優點

快速開發：

由於熱重載功能和豐富的組件庫，開發者可以更快更新和測試應用。

一致的 UI 表現:

Flutter 的組件是基於自己繪製的，因此無論在什麼平台上，UI 表現都一致。

強大的社群支持：

Flutter 擁有一個活躍且不斷增長的社群，提供了大量的資源和插件，幫助開發者解決各種問題。

Fltter檔案構造

flutter_project/
│
├── lib/
├── test/
│   └── widget_test.dart
├── android/
├── ios/
├── assets/
└── pubspec.yaml

lib

主要的 Dart 代碼存放處，包含應用程式的主要邏輯和功能。

test

用於存放測試代碼的地方。在這個資料夾中，你可以編寫單元測試和集成測試。

android

Android 平台的原生代碼存放處。通常你不太需要直接操作這個資料夾，除非你有特定的 Android 平台需求。

ios

iOS 平台的原生代碼存放處。與 android 資料夾一樣，大多數情況下你不需要直接處理這個資料夾。

assets

存放應用程式資源檔案的地方，如圖片、字體文件等。在 Dart 代碼中，你可以使用 AssetImage 或類似的類來訪問這些資源。

默認的測試文件，用於測試應用程式的 Widget。你可以在這裡添加和擴展測試。

Fltter教學資源

以下是網路上參考的學習資源

HKT 線上教室 Flutter 程式設計入門實戰 30 天

https://ithelp.ithome.com.tw/users/20096484/ironman/2699

猫哥 — Flutter 零基础入门中文教学

https://www.youtube.com/watch?v=C1emOeteMmc&list=PL274L1n86T839P6Bqd3M2knHhLjU0wRMG

Flutter中文网

https://doc.flutterchina.club/tutorials/

Flutter—Google推出的跨平台框架，Android、iOS一起搞定

https://ithelp.ithome.com.tw/users/20119550/ironman/2221

下載 Flutter

方法一 (推薦)

安裝Git for Windows(https://git-scm.com/download/win)

下載Flutter SDK

在C槽點滑鼠右鍵「Git bash here」，便會開啟git bash，你就可以在裡面下git command。

接著輸入git clone -b stable https://github.com/flutter/flutter.git
電腦就會自己去找Flutter官方發布的最新穩定版本並下載到當前資料夾。

安裝Flutter

進到flutter資料夾，執行flutter_console.bat

執行後會跳出以下畫面

輸入以下指令檢查電腦環境，並下載Dart的SDK

1	flutter doctor

最後會產生一個簡易的報表，這時會看到一些錯誤或警告。
別緊張，後面的步驟會一步一步處理它們。

先看一下有哪些錯誤

[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.

[X] Visual Studio - develop Windows apps
X Visual Studio not installed; this is necessary to develop Windows apps.

[!] Android Studio (not installed)

設定安裝

1	bin/sdkmanager --sdk_root="C:\Android\Sdk" --install "cmdline-tools;latest"

接受 Android SDK 授權協議

1	flutter doctor --android-licenses

設定環境變數

搜尋環境變數

點選環境變數

在使用者變數區域找到「path」變數

新增一個路徑到C:\flutter\bin

完成這個步驟之後就可以直接在cmd或powershell使用flutter commands，

下載安裝Android Studio

https://developer.android.com/studio?hl=zh-tw#get-android-studio

這邊發現好像改版成 Android Studio Koala了

設定模擬器

設定 C/C++ for Visual Studio Code

參考文件:https://code.visualstudio.com/docs/languages/cpp

後來發現這個操作沒有效，還是要直接安裝 Visual Studio

安裝visual studio

選擇 Desktop development with C++

因為以上這個問題，所以需要安裝visual studio 的 C++ workload

目前遇到這個問題，不知道如何處理，暫時忽略

安裝 cmdline-tools 組件

1.使用 SDK Manager 安裝 cmdline-tools
打開命令提示符或 PowerShell。

2.導航到你的 Android SDK 安裝目錄下的 cmdline-tools/bin 目錄。例如，如果你的 SDK 安裝在 C:\Users<你的用戶名>\AppData\Local\Android\Sdk，那麼命令應該是：

1 2	cd C:\Users\<你的用戶名>\AppData\Local\Android\Sdk\cmdline-tools\latest\bin

3.執行以下命令來安裝最新的 cmdline-tools：

1	sdkmanager --install "cmdline-tools;latest"

接受 Android SDK 許可
在命令提示符中輸入以下命令來接受所有 Android SDK 許可：

1	flutter doctor --android-licenses

安裝Flutter和dart plugin

目前實測操作結果如下

結尾

今天實際操作了 Flutter 的安裝，後續的Java 需要設定環境變數跟 android studio 安裝都花了比較多的時間，另外安裝 Visual Studio 也是花了很久的時間特別麻煩，而且很佔空間，另外遇到以下錯誤

錯誤碼 1310: 拒絕存取
Window Installer 服務要安裝 Visual Studio 所需封裝時，無法存取這部電腦的登錄或檔案系統。如果 Windows Defender 或其他防毒軟體會限制存取，就可能發生這種情況。

修正方式: 請檢查您的防毒設定，並確認 Windows Installer 服務對登錄和檔案系統有不受限制的存取權。

這部分目前打算暫時先略過，之後再來處理。