Back to Flet

Testing on Mobile

website/docs/getting-started/testing-on-mobile.md

0.85.0.dev23.5 KB
Original Source

import TabItem from '@theme/TabItem'; import Tabs from '@theme/Tabs'; import {Image} from '@site/src/components/crocodocs';

Start building awesome mobile apps in Python using just your computer and mobile phone!

:::note[Important]

<Tabs groupId="ios--android"> <TabItem value="ios" label="iOS">

Install the Flet iOS app on your iOS device. You will be using this app to see how your Flet project is working on iPhone or iPad.

<Image src="assets/getting-started/testing-on-mobile/ios/qr-code.jpg" alt="Get it on App Store" width="300" caption="[View on App Store](https://apps.apple.com/app/flet/id1624979699)" link="https://apps.apple.com/app/flet/id1624979699" />

Run the following command to start Flet development server with your app:

<Tabs groupId="uv--pip"> <TabItem value="uv" label="uv"> ```bash uv run flet run --ios [script] # (1)! ```
  1. flet run starts your app in hot reload mode. More info here. </TabItem>
<TabItem value="pip" label="pip"> ```bash flet run --ios [script] # (1)! ```
  1. flet run starts your app in hot reload mode. More info here. </TabItem>
</Tabs> </TabItem> <TabItem value="android" label="Android">

Install the Flet Android app on your Android device. You will be using this app to see how your Flet project is working on Android device.

<Image src="assets/getting-started/testing-on-mobile/android/google-play-badge.png" alt="Get it on Google Play" width="300" caption="[View on PlayStore](https://play.google.com/store/apps/details?id=com.appveyor.flet)" link="https://play.google.com/store/apps/details?id=com.appveyor.flet" />

Run the following command to start Flet development server with your app:

<Tabs groupId="uv--pip"> <TabItem value="uv" label="uv"> ```bash uv run flet run --android [script] # (1)! ```
  1. flet run starts your app in hot reload mode. More info here. </TabItem>
<TabItem value="pip" label="pip"> ```bash flet run --android [script] # (1)! ```
  1. flet run starts your app in hot reload mode. More info here. </TabItem>
</Tabs> </TabItem> </Tabs> A QR code with encoded project URL will be displayed in the terminal: <Image src="assets/getting-started/testing-on-mobile/ios/app-qr-code.png" alt="app-qr-code" width="300" />

Open Camera app on your Android device, point to QR code you got and click URL to open it in Flet app.

Try updating your [script] - the app will be instantly refreshed on your Android device.

To return to "Home" tab either:

  • Long-press anywhere on the screen with 3 fingers or
  • Shake your Android device.

You can also "manually" add a new project by clicking "+" floating action button in the app and typing in its URL.

:::note[Examples]

  • Below is a URL to a "Counter" Flet app that we hosted for testing purposes:
    https://flet-counter-test-ios.fly.dev
    
  • The "Gallery" tab of the app has some more examples that you can try out.
  • Explore Flet examples for even more examples. :::