-
Notifications
You must be signed in to change notification settings - Fork 60
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added Physical Device Setup #278
Merged
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -65,7 +65,7 @@ Here are the steps to use local run: | |||||
|
||||||
 | ||||||
|
||||||
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 | |||||
|
||||||
 | ||||||
|
||||||
## 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. | ||||||
|
||||||
 | ||||||
|
||||||
### 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**. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
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. | ||||||
|
||||||
 | ||||||
|
||||||
### 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**. | ||||||
|
||||||
 | ||||||
|
||||||
|
||||||
## 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). | ||||||
|
||||||
 | ||||||
|
||||||
## 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> | ||||||
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.