Tool Bar
The Tool Bar is present at the top of the app builder. It consists of various buttons for configuring your project, saving your app version, getting help, reporting/debugging any issues, seeing project comments, downloading your app code, and running your app directly in FlutterFlow.
Toolbar
This section displays essential information about your project. Here, you can easily check the project name, the current version of FlutterFlow that you're using, along with its release date. Additionally, it shows the Flutter version that your project is currently running on.
Project info
By clicking the Help button, you will get access to essential resource links that will come in handy while building apps.
We have a vibrant community of users comprising individuals who share a mutual interest in FlutterFlow. This community actively participates in engaging discussions, knowledge-sharing, and collaborative projects centered around FlutterFlow.
You can use this button to provide feedback and help us improve the product. It includes the following types of feedback:
- 1.Bug Report
- 2.Feature Request
- 3.General Feedback
From here, you can start the tutorial for building your first app right inside FlutterFlow.
While building your app, you might need to consult our official documentation frequently. This button will redirect you to FlutterFlow documentation.
If you are a paid user, we also allow you to search directly from documentation right inside our builder.
We want to keep you updated with all the latest features and changes that are being made in FlutterFlow. Using this button, you can directly access the updates regarding what's new in FlutterFlow.
We want to keep you informed about the current status of FlutterFlow and provide updates regarding any known issues. We aim to ensure transparency and keep you in the loop about the platform's performance and potential issues.
2.7 Show/Hide Chat
You can use this button to show/hide the chat button at the bottom right of the app builder.
it's now possible to share a link that takes the users directly to a specific page in the app builder. This is a great feature for sharing a specific page, component, and settings of your project, and can make it easier for users to navigate to the exact place they want.
By simply clicking the link button and sending it to someone, they can bypass the need to navigate through our app builder to see the desired page, component or settings.
Share links to a specific page
With keyboard shortcuts, you can perform common actions related to widgets and run your project in Test or Run mode with just a few keystrokes, saving you time and effort.
Keyboard shortcuts
The Command Palette helps you quickly navigate through our app builder. With just one click, you can access your app themes, view your code, add/duplicate a page, etc.
You can access it by pressing the search button or by pressing Cmd/Ctrl + K.
Command Palette
We allow 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 and enter the width and height (in pixels) you want.
.gif?alt=media&token=3593eef4-46d9-4805-8e28-adbd936126a0)
Canvas Size
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; for example, after finishing a page, after adding configuration, etc.
To save the current version:
- 1.Make some modifications to your project.
- 2.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.)
- 3.Click on the Save Version button. This will open a new popup.
- 4.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'.
- 5.Click on the Save Version.
.gif?alt=media&token=4eb93afd-059a-4b37-b940-45be0a988213)
Saving a Version
To restore to the previous version:
- 1.Click on the version dropdown. This will open a popup menu.
- 2.From the list of previously stored versions, identify the version you want to restore and click on the Restore button.
- 3.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 or warnings present in your current project that might result in a build failure or app crash, 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.
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.
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 your 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, we will 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 Download APK button to generate a release build of your app. It will automatically download the
.apk file after the building process is complete. The following prompt will be shown as the building process starts:
Download 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.
Tips:
- 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.
There are a few limitations in this mode; you can't use Firebase or perform API calls in the Preview mode. However, the onDoubleTap, onLongPress, and onSubmit works in this mode.
A list of not supported features is displayed in the Known Issues menu in Preview mode.
Preview mode
This 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:
- 1.Click on the Test icon or press Cmd/Ctrl + I (a keyboard shortcut). This will run your app in a new browser window.
Run mode
- 2.Switch to the app builder and make some changes in the app, such as changing colors and changing alignment.
- 3.Now switch to the Test mode tab and click Instant Reload or press Cmd/Ctrl + J to see the changes in under 10 seconds.
if you see a progress bar at the top of the device running for more than 15 seconds, try refreshing the page.
13.2 Run Mode
You can test a fully-functional version of your 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.
To run the app in Test Mode:
- 1.Click on the dropdown next to the Test Mode button or press Cmd/Ctrl + E (a keyboard shortcut). 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:
- 2.There are two ways to share a copy of your Run Mode:
- 1.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.
- 2.Or, once the run mode is complete, select Make Public.
- 3.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
You can also switch between light and dark mode backgrounds in Test and Run Mode! This enhancement is especially beneficial for apps that have a dark theme, as it significantly improves the contrast between the app and the background. As a result, you can now easily see and test your app without any visual distractions.
Changing background color in Test and Run mode
Last modified 10d ago