Tool Bar

The Tool Bar is present on top of the UI Builder page. It is consists of various buttons for configuring your project, saving your app version, adding a new page, reporting/debugging any issues, downloading your app code, and instantly running your app directly in FlutterFlow.
Toolbar
1. Canvas Size
FlutterFlow allows you to visualize and design your app for various mobile, tablet, and desktop devices. The canvas size is defined as width (in pixels) x height (in pixels). This size is determined according to the device selected. To set a custom canvas size, click on the Canvas Size present on the Tool Bar and enter the width and height (in pixels) that you want to use.
Canvas Size
2. Version Control
Version Control keeps the track of changes made to the FlutterFlow project. If anything goes wrong (maybe you delete the page/component or remove some configuration by mistake) you can roll back to the previously saved state of your project.
Version Control
2.3 Saving a Version
Saving the latest changes will store the current state of your app in the version control. In the future, if anything goes wrong you can restore your app to the currently saved state.
Ideally, you should save the version whenever you accomplish something that is important to you. For example, after building a page, after adding configuration, etc.
To save the current version:
Make some modifications to your project.
Click on the version dropdown. This will open a popup menu. (If this is your first time saving the version, it will be displayed as V1.)
Click on the Save Version button. This will open a new popup.
Enter a message that describes this version. For example, if you added dark mode to any page, you should write as 'Added Dark Mode to Car Page' instead of just 'Dark Mode'.
Click on the Save Version.
Saving a Version
Restoring a Version
To restore to the previous version:
Click on the version dropdown. This will open a popup menu.
From the list of previously stored versions, identify the version you want to restore and click on the Restore button.
A confirmation popup will appear. Click on the Yes, Restore button.
Restoring to the previous version will save the current version and then load the changes from the version you are restoring from.
Restoring a Version
3. Add Page
Use this button to add a new page to your existing project. You can either create an empty page by clicking on Create New and then start adding UI elements from scratch, or select any template screen from the list and customize it as per your need.
Add Page
4. Help
By clicking the Help button, you will get access to some important resource links which will come in handy while building apps using FlutterFlow. You can sign up for access to the FlutterFlow Community Forum. Here are instructions on how to complete your community account setup.
How To Submit Bug Reports and Feature Requests
The Feedback button allows you to submit bug reports, feature requests, and general feedback. You will also find a link to our YouTube channel and a link to join our Discord channel.
Submit in app bug reports
You will also find these links on the Introduction page of this documentation.
5. Project Issues
If there are any issues present in your current project that might result in a build failure or app crashing, they would be displayed in this section. You can click this button to view a short description of each issue and navigate to the place where you can fix the issue by clicking on the respective issue.
Project Issues
6. Developer Menu
In the Developer Menu, you can view the code for your project, connect to GitHub, and also download the source code for your project.
Developer Menu
6.1 View Code
This option lets you display the Dart code for all the screens of your FlutterFlow project. You can also take a look at the dependencies being used by the app here.  
6.2 Connect GitHub Repo (Paid Feature)
You can use this option to connect a FlutterFlow project with your GitHub account and upload it to a GitHub repository. When you click this option, you will be navigated to the Settings and Integrations > Integrations > Github section.
From this page, you can configure your project to add GitHub integration to it. This allows you to upload your entire app codebase to a repository on a new branch called flutterflow.
You can get a detailed step-by-step guide for connecting to GitHub here.
6.3 Download Code (Paid Feature)
You can download the entire codebase of the Flutter app generated by FlutterFlow using the Download Code option. It will download a .zip file. You can open the contents using any code editor to make modifications. While you download the code, FlutterFlow will also display a few commands that you have to run in order to get the dependencies and generate some code.
Make sure that you have Flutter installed on your system. Here are the instructions on how to download Flutter.
Download Code
7. Build APK
You can use the Build APK button to generate a release build of your Flutter app. It will automatically download the .apk file after the building process is complete. The following prompt will be shown on FlutterFlow as the building process starts:
Build APK
The APK can be used to easily test the app on any Android device.
Before downloading your APK, ensure you have pop-ups enabled for FlutterFlow. You can view instructions on enabling pop-ups here.
8. Preview
To quickly try out your app on a virtual device without waiting for it to build, you can use the Preview mode. This helps you to have a good overview of the navigation and animations that you have added to your app. You can also preview your app in the Dark/Light mode and visualize it on various mobile, tablet, and desktop devices.
Preview mode will open to the page you are currently viewing in the UI Builder.
There are a few limitations in this mode, you can't use Firebase, or perform API calls in the Preview mode. Full details on these are listed under Known Issues.
Previewing App
9. Run
Using Run mode you can test a fully-functional version of your FlutterFlow app - including live data. It will build the app, which typically requires around 2-4 minutes - but can be longer for larger projects. You will then be able to interact with your app through your web browser. 
If your project uses Firebase, make sure you have completed the Firebase configuration and also added the Firebase Web Config in Settings and Integrations > Firebase. You can view instructions on how to set up the Web Config here.
Running a Project
You can share a copy of your Run Mode app using these steps:
There are two ways to share a copy of your Run Mode:
Click on the Dropdown menu inside the Run Button. The Project Run Version shows the list of all your previous run links. Turn on the toggle to make any link public.
Or, once the run mode is complete, select Make Public
Share the link. It should be copied into your clipboard. If this doesn't work, make sure to enable the Clipboard.
To make your project private at a later time, open the link you shared and select Make Private or turn off the toggle inside the Project Run Version.
Quickounce app in Run mode
8.1 Test Mode
Test mode uses Flutter's "Hot Reload" feature, which lets you immediately see any changes made to code in an emulator or on-device. Running your app in Test Mode helps you experiment, test UIs, and fix bugs faster.
To run the app in Test Mode:
Click on the Dropdown menu inside the Run Button.
Click on Test. This will run your app in a new browser window.
Switch to the FlutterFlow UI builder and make some changes in the app such as changing colors, changing alignment.
Now switch to the Test mode tab and click Instand Reload to see the changes under 10 seconds.
if you see a progress bar at top of the device running for more than 15 seconds, try refreshing the page.
Test Mode

Properties Panel

Next - FlutterFlow Introduction

Build Your First App

Last modified 4mo ago

Copy link

On this page

1. Canvas Size

2. Version Control

3. Add Page

4. Help

How To Submit Bug Reports and Feature Requests

5. Project Issues

6. Developer Menu

7. Build APK

8. Preview

9. Run