[flutter]如何在手機上測試 Flutter App

Flutter 支援 Android 和 iOS 實機測試，你可以透過 USB 連接手機，然後直接在手機上運行你的 Flutter 應用程式。

1. 準備環境

🛠 安裝必要工具

  • Flutter SDK（官方下載）
  • Android Studio / VS Code（用於開發）
  • Android 手機 / iPhone（實機測試）

🔹 確認 Flutter 安裝是否完整：

flutter doctor

如果有任何問題，請依照提示修復。

2. 在 Android 手機上測試

🔹 (1) 啟用 USB 偵錯

  1. 打開手機「開發者選項」

    • 到 「設定」→「關於手機」
    • 連續點擊 「版本號」 7 次，解鎖開發者模式
    • 返回 「設定」→「系統」→「開發者選項」
    • 開啟「USB 偵錯」

  2. 用 USB 連接手機

    • 確保你的手機和電腦連接成功
    • 選擇「允許 USB 偵錯」

  3. 確認設備是否可用

    flutter devices

    若成功，應該會顯示類似：



  4. 運行應用

    flutter run

    ✅ 成功後，App 會自動安裝並在手機上運行！

3. 在 iPhone 上測試

🔹 (1) 準備 iOS 設備

  1. 安裝 Xcode（Mac 限定）

    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    sudo xcodebuild -runFirstLaunch

  2. 用 USB 連接 iPhone

    • 確保 信任此電腦
    • 在 「設定」→「隱私權與安全性」→「開發者模式」 開啟

  3. 安裝 CocoaPods（如果尚未安裝）

    sudo gem install cocoapods

  4. 確認設備是否可用

    flutter devices

    如果顯示 iPhone，代表可用：

    1 connected device:
    iPhone 13 Pro (mobile) • 00008110-001D50D21E90001E • ios • iOS 16.0

  5. 運行應用

    flutter run

    ✅ 成功後，App 會出現在你的 iPhone 上！

4. 無線測試（不接 USB）

如果你不想每次都插 USB，可以使用 Wi-Fi 無線調試：

🔹 (1) Android

  1. 在 Android Studio 中開啟「Device Manager」
  2. 選擇你的設備，點選「Pair using Wi-Fi」
  3. 連接成功後，執行：
    flutter run
    🔹 這樣就不需要 USB 連接手機了！

🔹 (2) iPhone

  1. Xcode →「Devices and Simulators」
  2. 選擇你的 iPhone，勾選「Connect via network」
  3. 無線執行
    flutter run

5. 安裝 APK / IPA（不使用 flutter run）

如果你不想每次都用 flutter run，可以直接安裝 APK（Android）或 IPA（iOS）。

🔹 Android：打包 APK

flutter build apk --release
adb install build/app/outputs/flutter-apk/app-release.apk

✅ 這樣 App 會安裝到手機上。

🔹 iOS：打包 IPA

flutter build ios --release

然後用 Xcode 上傳到 iPhone。

🚀 總結

操作指令 / 操作
確認設備flutter devices
運行應用flutter run
無線測試（Android）Android Studio → 「Pair using Wi-Fi」
無線測試（iPhone）Xcode → 「Connect via network」
打包 APKflutter build apk --release
安裝 APKadb install app-release.apk
打包 iOS IPAflutter build ios --release

留言

張貼留言

這個網誌中的熱門文章

flutter 使用 ToastDialog 範例

 Flutter中沒有內置的Toast Dialog小部件，但是可以使用第三方庫來實現。這裡有一個示例，該示例使用flushbar庫實現Toast Dialog小部件。首先需要在 `pubspec.yaml`  文件中加入flushbar庫： yaml dependencies:   flushbar: ^1.10.0 接下來，使用以下代碼在您的Flutter應用程式中使用Toast Dialog小部件： import 'package:flushbar/flushbar.dart'; void showToast(String message, BuildContext context) {   Flushbar(     message: message,     duration: Duration(seconds: 3), // 設定顯示時間     flushbarStyle: FlushbarStyle.GROUNDED, // 設定樣式   )..show(context); } 以上代碼使用Flushbar庫創建一個Toast Dialog小部件。 `showToast()` 方法接受一個訊息和上下文對象，然後顯示Toast Dialog小部件。Toast Dialog小部件自動消失，消失時間可以使用 `duration` 屬性設定。另外，還可以使用 `flushbarStyle` 屬性設定Toast Dialog小部件的樣式。 可以像以下方式，使用上面的  `showToast` 方法顯示Toast Dialog小部件： showToast('Hello, World', context); 我們可以在需要顯示資訊的地方調用這個方法，顯示Toast Dialog小部件。希望這可以幫助到您！
閱讀完整內容

[flutter]flutter如何防止GPS偽定位

在 Flutter 中，要防止 GPS 偽定位（Mock Location），可以採取以下幾種方法： 1. 檢測是否啟用了 Mock Location（Android） 在 Android 設備上，你可以使用 isMockLocation 來判斷位置數據是否是模擬的。 方法 1：透過 Location 插件 import 'package:location/location.dart'; Future<bool> isMockLocationEnabled() async { Location location = Location(); LocationData locationData = await location.getLocation(); return locationData.isMock ?? false; } 方法 2：透過 locationManager （更準確） 使用 MethodChannel 來直接調用原生 Android API 來檢測 Mock Location： import 'package:flutter/services.dart'; Future<bool> isMockLocation() async { const platform = MethodChannel('mock_location_checker'); try { final bool result = await platform.invokeMethod('isMockLocation'); return result; } on PlatformException { return false; } } 對應的 Android 原生代碼（Kotlin）： package com.example.app import android.content.Context import android.location.Location import android.location.LocationManager import android.os.Build import io...
閱讀完整內容

ScaffoldMessenger 範例

 Flutter 2.0 引入了  `ScaffoldMessenger`  來取代舊的  `Scaffold.of(context)` 。這使得 Flutter 中的 Snackbars 和 Bottom Sheets 更加可靠。以下是一個示例，使用  `ScaffoldMessenger`  來顯示 Snackbar。  首先，需要在  `Scaffold`  中添加一個  `ScaffoldMessenger`  小部件。這裡有一個簡單的  `Scaffold`  小部件的示例： class MyHomePage extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: Text('ScaffoldMessenger Demo')),       body: Center(child: Text('Hello, World!')),       floatingActionButton: FloatingActionButton(         onPressed: () {           // 在这里显示 Snackbar         },         child: Icon(Icons.add),       ),     );   } } 接下來，在 FloatingActionButton 的  `onPressed`  回調中，使用  `ScaffoldMessenger`  來顯示 Snackbar。這是一個示例： clas...
閱讀完整內容