Tool Bar
The Tool Bar is present on top of the UI Builder page. It 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
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) you want.
.gif?alt=media&token=3593eef4-46d9-4805-8e28-adbd936126a0)
Canvas Size
The Command Palette helps you more quickly navigate the FlutterFlow builder. With just one click, you can access your app themes, view your code, duplicate a page, etc.
You can access the Command Palette at the top of the Builder or by pressing Cmd/Ctrl + K.
.gif?alt=media&token=d745a574-9570-400a-91b2-8f520b6e5bfe)
While building your app, you might need to consult our official documentation frequently. You can now search for any topic from the documentation right inside our builder.
To search docs from our builder, open the command pallet, select Search Docs, enter your search term, and the list will be presented with matching results. Clicking on the search item result will open the detailed documentation in a new tab.
Search docs
By clicking the Help button, you will get access to essential resource links that 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.
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.
.gif?alt=media&token=318d1b4e-bab1-4215-aa85-1ab5631e91fa)
Submit in-app bug reports
Project Versions
Versions allow you to save a named version of your 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.
Snapshots
Snapshots are automatically saved as you build.
Free users can have access to one day of snapshots, while paying users have access to 7 days of snapshots.
Version Control
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 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.
.gif?alt=media&token=4eb93afd-059a-4b37-b940-45be0a988213)
Saving 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.
.gif?alt=media&token=81410475-185a-42a5-a8fb-883e193a9e2f)
Restoring a Version
If there are any issues present in your current project that might result in a build failure or app crashing, they will 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.
.gif?alt=media&token=3b371f42-c89e-45a6-bf4d-b5dbb1475541)
Project Issues
This helps you leave your thoughts, opinions, questions, or feedback on a specific widget with your project team or a client. While adding a comment, you can tag users, and they will be able to respond, creating a thread of conversation.
To add a comment, select the widget for which you want to share feedback, open the comment box, click on the 
icon, and you can start sharing feedback. To tag users, select the @ symbol and choose the project team member(s).
If you are tagged in a comment, you'll see the number of comments assigned to you in the Assigned tab. From there, you can reply and resolve the comment. Tip: opening a comment auto-selects widget in the UI builder for which the user has posted the comment.
Adding a comment
Reply & Resolve a comment
The Selected tab shows all the comments made on the currently selected widget. The Resolved tab shows all the resolved comments, and you can return them to an open status if necessary.
Resolved tab
Selected tab
In the Developer Menu, you can view the code for your project, connect to GitHub, and also download the source code for your project.
.gif?alt=media&token=3d55e6d0-ec65-43ba-9e24-2b3f62157734)
Developer Menu
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.
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 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 you have to run 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
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 test the app on any Android device easily.
Before downloading your APK, ensure you have pop-ups enabled for FlutterFlow. You can view instructions on enabling pop-ups here.
You can make a project public so that others can view and clone your project. Before you share your project, make sure to remove any sensitive information.
Tip: you can only share projects where you are the owner.
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 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 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.
.gif?alt=media&token=efd5896e-cf5f-452f-b060-4d10414180d0)
Previewing App
The testing menu allows you to create a Test Mode or Run Mode instance of your project.
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.
If your project uses Firebase, ensure you have completed the Firebase configuration and added the Firebase Web Config in Settings and Integrations > Firebase. You can view instructions on how to set up the Web Config here.
To run your app in Test Mode:
- Click on the Test icon. This will run your app in a new browser window.
Run mode
- Switch to the FlutterFlow UI builder and make some changes in the app, such as changing colors, and changing alignment.
- Now switch to the Test mode tab and click Instant Reload to see the changes in under 10 seconds.
if you see a progress bar at top of the device running for more than 15 seconds, try refreshing the page.
10.2 Run Mode
You can test a fully-functional version of your FlutterFlow app using the Run mode, 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, ensure you have completed the Firebase configuration and added the Firebase Web Config in Settings and Integrations > Firebase. You can view instructions on how to set up the Web Config here.
To run the app in Test Mode:
- Click on the dropdown next to the Test Mode button. This will run your app in a new browser window.
Run mode
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 later, open the link you shared, select Make Private, or turn off the toggle inside the Project Run Version.
Quickounce app in Run mode
Last modified 6d ago