Added physical device setup (#278)

Co-authored-by: Pooja Bhaumik <[email protected]>

Author: pinkeshmars

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).
 
 <div style={{
     position: 'relative',
@@ -101,15 +101,47 @@ and reloads the entire app, resetting its state. For more info, you can visit [F
 
 ![run-controls](../imgs/run-controls.avif)
 
-## Access device logs in local run
+## Setup Physical Device
+
+Testing your app on physical devices is essential to ensure it performs as expected in real-world scenarios. To set up a physical device, first, launch the project in **Android Studio** or **Xcode**, depending on the platform you are targeting. You can easily access these options by clicking on the **code icon** in the **Local Run** menu.
+
+![access-project-code.avif](../imgs/access-project-code.avif)
+
+### Setup Android Device
+
+To setup Android physical device, first enable Developer Options and USB Debugging in your Android device. Navigate to **Settings > 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.
 
 To access the device logs, first run your app using the local run. Then, open the test menu and click on **Logs** icon. This will display a floating window with detailed logs of the app while it's running.
 
 ![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
 </div>
 <p></p>
 
-### 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:
 <div class="video-container"><iframe width="630" height="355" src="https://www.youtube.com/embed/k9NpYncXC_U" title="Local Run | New Feature Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>