From 846607da636ef2b041552a5137af4d2d0920b2ac Mon Sep 17 00:00:00 2001 From: pinkeshmars <71133091+pinkeshmars@users.noreply.github.com> Date: Tue, 18 Feb 2025 13:06:31 +0530 Subject: [PATCH] Added physical device setup (#278) Co-authored-by: Pooja Bhaumik --- .../running-your-app/local-run.md | 56 +++++++++++++++---- 1 file changed, 46 insertions(+), 10 deletions(-) diff --git a/docs/testing-deployment-publishing/running-your-app/local-run.md b/docs/testing-deployment-publishing/running-your-app/local-run.md index 7245547a..f4d3ad6f 100644 --- a/docs/testing-deployment-publishing/running-your-app/local-run.md +++ b/docs/testing-deployment-publishing/running-your-app/local-run.md @@ -65,7 +65,7 @@ Here are the steps to use local run: ![code-export](../imgs/code-export.avif) -7. From the test menu, click on the **Get Devices** button. This will list devices connected to your system. You can add or remove devices from the list by clicking on the **+** and **-** buttons, respectively. Once you've finalized your selection, simply click on the **Test** button to see your app running on selected devices. **Tip**: In the Mac OS desktop app, you can directly open the simulator by clicking on the **Launch iOS Simulator** text. +7. From the test menu, click on the **Get Devices** button. This will list devices connected to your system. You can add or remove devices from the list by clicking on the **+** and **-** buttons, respectively. Once you've finalized your selection, simply click on the **Test** button to see your app running on selected devices. **Tip**: In the Mac OS desktop app, you can directly open the simulator by clicking on the **Launch iOS Simulator** text. To test app on a real device, see how to [setup a physical device](#setup-physical-device).
About phone**, tap **Build number** seven times to activate Developer Options, then go to **Settings > System > Developer options** and enable **USB debugging**. + +Connect your device to your computer via USB, authorizing the connection if prompted. Verify the setup by running `flutter devices` in Android Studio’s terminal; your device should appear in the list of connected devices. + +:::info + +For more detailed guidance, refer to the [**Android Flutter documentation**](https://docs.flutter.dev/get-started/install/macos/mobile-android#configure-your-target-android-device). + +::: + +### Setup iOS Device + +To setup iOS physical device, you must configure your **Apple Developer account** and set up **code signing** in Xcode. First, add your **Apple ID** by opening **Xcode > Preferences > Accounts**, clicking **"+"**, selecting **Apple ID**, and signing in. + +Next, assign your project to a development team. Open your project in Xcode, select the **Runner** project, go to **Signing & Capabilities**, and choose your **Apple Developer team** in the **Team** dropdown. If your team is not listed, ensure that your Apple ID has been properly added to Xcode. + +Finally, configure code signing to allow your app to run on a real device. Ensure **"Automatically manage signing"** is enabled. Xcode will attempt to create and download a **provisioning profile** for your project. If issues arise, you may need to manually create a provisioning profile in the **Apple Developer Certificates, Identifiers & Profiles** section. Once created, download and double-click the provisioning profile to install it in Xcode. + +:::info + +For more detailed guidance, refer to the [**iOS Flutter documentation**](https://docs.flutter.dev/get-started/install/macos/mobile-ios#configure-your-target-ios-device). + +::: + +## Access Device Logs in Local Run Device logs provide a way to access and view the logs generated by your app while it's running on a device or simulator. They are invaluable for understanding the inner workings of your app. If something isn't functioning as expected, the device logs can reveal the reasons behind it. @@ -109,7 +141,7 @@ To access the device logs, first run your app using the local run. Then, open th ![access-device-logs](../imgs/access-device-logs-2.avif) -### Console input +### Console Input The console input in local run is particularly useful for performing hot reload and hot restart directly from the device logs. To initiate a hot reload, press `r` followed by `Enter`, and for a hot restart, press `R` followed by `Enter`. Additionally, any terminal commands commonly used with Flutter while running an app should work with the console input. @@ -141,24 +173,24 @@ The console input in local run is particularly useful for performing hot reload

-### Checking errors +### Checking Errors Any errors displayed in the red box on your screen are also recorded in the Device logs, where you can find detailed information about the app's state and the events leading up to the issue. -## Reconfigure local run setup +## Reconfigure Local Run Setup If you need to update the Flutter SDK version, run Flutter Doctor, or start the simulator again, simply open the test menu and click **Configure**. ![reconfigure-local-run.avif](../imgs/reconfigure-local-run-2.avif) -## Access project code +## Access Project Code To access the project code, open the test menu and ensure the project is not running. Click on the **code icon**, and you'll be presented with options to either open the project folder, project in your preferred IDE or directly launch the project in Xcode (for macOS users). ![access-project-code.avif](../imgs/access-project-code.avif) -## Manually download code and run +## Manually Download Code and Run There may be certain situations where you, as a developer, may prefer not to have local runs overwrite any changes that have been made in the code. In such cases, you can manually download the code onto your local system and then make any modifications as needed. @@ -169,7 +201,7 @@ Here’s how you do it: 3. [Installing IDE and Plugins](#3-installing-ide-and-plugins) 4. [Running app on device](#4-running-app-on-device) -### 1. Download code +### 1. Download Code :::warning @@ -225,10 +257,14 @@ You can choose to install either [Visual Studio Code](https://code.visualstudio. - To install Visual Code with Flutter and Dart plugins, check out [this link](https://flutter.dev/docs/get-started/editor?tab=vscode). - To install Android Studio with Flutter and Dart plugins, check out [this link](https://flutter.dev/docs/get-started/editor?tab=androidstudio). -### 4. Running app on device +### 4. Running App on Device You can choose to run your app on a real device or an emulator. +:::tip +To test app on a real device, see how to [**setup a physical device**](#setup-physical-device). +::: + To run your app on a device: 1. First open the downloaded project in your preferred IDE. @@ -258,7 +294,7 @@ Running your app on a Desktop involves: visibility using [Responsive Visibility](../../ff-concepts/layout/responsive-layout.md#responsive-visibility). 3. **Run the app on a desktop**: Use the Local Run feature in the FlutterFlow Desktop app or manually download and run the code, choosing your target device (e.g., macOS) before running. -## Video guide +## Video Guide If you prefer watching a video tutorial, here's the one for you: