FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

Testing On Desktop

This page guides you on testing your app on a desktop.
FlutterFlow allows you to develop a desktop app that can be run on a Windows, macOS, and Linux operating system.

Prerequisites

Before you start testing your desktop app, make sure to set up your machine.

How To Test Desktop App

Testing the desktop app consists of the following steps:

1. Adding Platforms

By default, FlutterFlow allows you to run your app on Android, iOS, and Web without any additional effort. However, to run your app on the desktop you need to add a platform (e.g. MacOS, Windows, Linux) inside the FlutterFlow.
To add platform support:
  • Click on the Setting and Integrations (
    ) from the Navigation Menu (left side of your screen).
  • Select the General tab and then select Platforms.
  • Under the Supported Platform, checkmark the platform that you want to support. (e.g. To run your app on Mac, select on MacOS(beta)).

2. Make Design Adjustment (Optional)

If you are starting from scratch, you can set the canvas size to desktop and design pages accordingly. but if you are adding desktop support from an existing mobile app, you need to make some adjustments in your design so that UI looks balanced between mobile and desktop.
Here's an example of making minor adjustments in Login UI so that it looks good in both a mobile and desktop app.
  • Select your page.
  • Select Desktop icon (
    ) inside the Canvas Size option and select the canvas size based on device.
  • See how it looks on a wider screen and identify what changes you can make. For example, The Tabbar (Login, Create Account) is too much wider, we can wrap it inside the Container and give its width/height in percentage (%). This will make the TabBar occupy the space in percent of the screen regardless of mobile or desktop screen.
  • Wrap the TabBar inside Container and set its width and height to 70%.
  • Switch to the Mobile icon (
    ) inside the Canvas Size option and see how it looks on a mobile.
  • Make other adjustments if you would like to.

3. Download Code

FlutterFlow allows you to download the entire codebase and run it on your preferred IDE. This feature is included in our Standard and Pro plans.
Make sure to address any project issues, before downloading the code.
To download your app code:
  • Move to the toolbar and click on the Developer Menu (
    ) > Download Code (
    ). This will download the .zip file. Extract the .zip file to view the contents of the project.
  • Alternatively, you can also download and extract the code using FlutterFlow CLI.
    1. 1.
      To do so, open the terminal and hit the dart pub global activate flutterflow_cli.
    2. 2.
      Once installed, enter this command: flutterflow export-code --project <project id> --dest <output folder> --[no-]include-assets --token <token> Note that you must replace the <project id>, <output folder>, and <token> with your own.
You can find the project id in the app URL and the API token on your account page.
Download from builder
Download via CLI
Download from builder
Download via CLI
Project id

4. Opening The Project In An Editor (Android Studio)

To open the downloaded project in Android Studio:
  • Open Android Studio.
  • Click on Open and select the project folder from where you have downloaded the code earlier.
  • To generate the code required for the project to compile, navigate to Terminal in Android Studio and enter the commands below:
flutter pub get
flutter pub run flutter_launcher_icons:main
  • The second command is only necessary if using Firestore. The third is only necessary if you have an App Launcher Icon.
  • Entering the above command for the first time may take some time to run.

5. Enabling Desktop Support

To be able to run your app on a desktop, you need to enable desktop support.
To enable desktop support:
  • Navigate to Terminal in Android Studio and enter the below command based on your operating system.
  • Restart your IDE.
Before you try the below command, make sure you are on the latest version of Flutter by hitting the flutter upgrade command in the terminal.
MacOS
Windows
Linux
flutter config --enable-macos-desktop
flutter config --enable-windows-desktop
flutter config --enable-linux-desktop
To ensure that the desktop support is enabled, hit the following command and see if your OS name appears in the list.
flutter devices

6. Running The App On Desktop

To run your app on a desktop:
  • Open the Android Studio.
  • Select the Flutter Device Selection dropdown (in the Toolbar) and choose your operating system name (e.g. macOS, windows, linux).
  • Click on the Run button (looks like a green color play button).
If your device is not listed in the Flutter Device Selection dropdown, make sure you have properly completed the Desktop setup.
​
Previous
Testing On Mobile Device
Next
How To Identify And Correct Issues By Testing Locally
Last modified 8d ago