2025-04-29 16:16:30 +08:00
|
|
|
|
# CommunityApp
|
2025-04-29 16:12:09 +08:00
|
|
|
|
|
2025-04-29 16:16:30 +08:00
|
|
|
|
本專案為使用 Flutter 開發的社區應用程式。
|
2025-04-29 16:12:09 +08:00
|
|
|
|
|
2025-04-29 16:16:30 +08:00
|
|
|
|
---
|
2025-04-29 16:12:09 +08:00
|
|
|
|
|
2025-04-29 16:16:30 +08:00
|
|
|
|
## 🛠️ 開發環境安裝流程
|
2025-04-29 16:12:09 +08:00
|
|
|
|
|
2025-04-29 16:16:30 +08:00
|
|
|
|
### 1. 安裝工具與開發環境
|
|
|
|
|
|
|
|
|
|
|
|
- 安裝 [Flutter SDK](https://flutter.dev/docs/get-started/install)
|
|
|
|
|
|
- 安裝 [Android Studio](https://developer.android.com/studio)（內含 Android 模擬器）
|
|
|
|
|
|
- （如需打包 iOS）安裝 Xcode（限 MacOS）
|
|
|
|
|
|
- 在 Android Studio 中安裝 Flutter Plugin
|
|
|
|
|
|
- 執行以下指令檢查環境設定是否正確：
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
flutter doctor
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 設定系統變數（加入 Flutter 至 PATH）
|
|
|
|
|
|
|
|
|
|
|
|
- **Windows**
|
|
|
|
|
|
控制台 → 環境變數 → 系統變數 → Path → 新增：`<你的 flutter 路徑>\bin`
|
|
|
|
|
|
|
|
|
|
|
|
- **Mac/Linux**
|
|
|
|
|
|
在 `~/.bashrc` 或 `~/.zshrc` 加入以下內容：
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
export PATH="$PATH:/你的/flutter/bin/路徑"
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 驗證安裝是否成功
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
flutter --version
|
|
|
|
|
|
flutter doctor
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🐞 常見錯誤與解法
|
|
|
|
|
|
|
|
|
|
|
|
### ❗ cmdline-tools component is missing
|
|
|
|
|
|
|
|
|
|
|
|
解法：
|
|
|
|
|
|
|
|
|
|
|
|
1. 開啟 Android Studio
|
|
|
|
|
|
2. 選單：`Settings → Appearance & Behavior → System Settings → Android SDK`
|
|
|
|
|
|
3. 切到 `SDK Tools` 分頁
|
|
|
|
|
|
4. 勾選 `Android SDK Command-line Tools (latest)`
|
|
|
|
|
|
5. 點選 Apply 安裝
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
### ❗ Android license status unknown
|
|
|
|
|
|
|
|
|
|
|
|
解法：
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
flutter doctor --android-licenses
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
出現授權條文時，請一律輸入 `y` 接受。
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 建立與執行專案
|
|
|
|
|
|
|
|
|
|
|
|
> ⚠️ 注意：資料夾與檔案名稱請勿含中文、空格或大寫！
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
flutter create communityapp
|
|
|
|
|
|
cd communityapp
|
|
|
|
|
|
flutter run
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
執行後會看到 Flutter 的預設計數器 App 出現在模擬器上。
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📦 打包 APK 並讓手機掃 QRCode 安裝
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 建立 APK 檔案
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
flutter build apk --release
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 啟動本機伺服器
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
cd build/app/outputs/flutter-apk
|
|
|
|
|
|
python -m http.server 8000
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 找出本機 IP
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
ipconfig # Windows
|
|
|
|
|
|
ifconfig # Mac/Linux
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
記下你的 IP，例如 `192.168.1.100`
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 手機下載安裝 APK
|
|
|
|
|
|
|
|
|
|
|
|
在手機瀏覽器輸入：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
http://192.168.1.100:8000/app-release.apk
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
> 或者你也可以產生一個 QRCode，掃描後直接下載。建議使用網路工具或程式碼自動產生。
|
|
|
|
|
|
|
|
|
|
|
|
---
|
