Toolbar

The Toolbar 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.

1. Project info

Hovering over this section reveals the 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.

2. Help

By clicking the Help button, you will get access to essential resource links that will come in handy while building apps.

2.1 Search Docs

If you are a paid user, we allow you to conduct a direct search from documentation.

2.2 Community Forum

We have a vibrant community of users comprising individuals who share a mutual interest in FlutterFlow. This community actively engages in discussions, knowledge-sharing, and collaborative projects centered around FlutterFlow.

2.3 Feedback

Use this button to provide feedback and help us improve the product. It includes the following types of feedback:

  1. Bug Report

  1. Feature Request

  1. General Feedback

2.4 Bug report

Submit a bug report from here.

2.5 Tutorials

From here, you can start the tutorial for building your first app right inside FlutterFlow.

2.6 FAQs and Docs

While building your app, you might need to consult our official documentation frequently. This button will redirect you to FlutterFlow documentation.

2.7 What's New?

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.

2.8 Current Status/Known Issues

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.9 Show/Hide Chat

You can use this button to show/hide the chat button at the bottom right of the app builder.

3. Keyboard shortcuts

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.

4. Command Palette

The Command Palette makes it easy to find and use things in the App Builder. Click once to see all pages, components, widgets, actions, API calls, variables, and more.

Open the Command Palette by clicking the search button or pressing Cmd/Ctrl + K. Search for anything, and to find out where it's used, click the purple arrow – we'll show you every place. For direct access to the page with the item, click on the item itself.

5. Canvas size

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.

6. Project history

Versions

Versions enable you to save specific named states of your project. This function is particularly useful for recovery purposes. if you accidentally delete a page or component or change settings, you can easily revert to a saved version, restoring your project to its earlier state.

Snapshots

Snapshots are automatically saved as you build.

Users on the Free and Standard plans can access only one day of snapshots.

6.1 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 important, for example, after finishing a page, 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 button. This will open a new popup.

  4. Enter a message that describes this version.

  5. Click on the Save Version.

6.2 Restoring 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 it.

  3. Optional: You might want to see the changes in the previous version before you restore it. To do so, click on the Peek button. It will open that version in the new tab. Additionally, if you want to try the code on your local device, you can also download the code for this version.

  4. To restore the version, click on the Restore button.

  5. 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 project version

7. Project comments

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.

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.

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.

8. Optimizations & Enhancements

We scan and suggest enhancements to elevate your app's design and speed. Imagine having a personal consultant for design and performance dedicated to improving the user experience of your app.

Optimizations: We spotlight elements that may slow down your app. For example, a query on a column, unused and duplicate backend query, a widget with unbounded size, etc.

UI Enhancements: We offer tips for a more visually appealing and user-friendly design, like resizing a small tap target of any widget.

You can control what kind of suggestions you would like to receive by clicking on the settings icon on the right.

9. Project issues

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.

10. Branching

Branching allows you to create a separate copy of your existing project to build new things without breaking existing features.

11. 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.

11.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.

11.2 Connect GitHub Repo (Paid Feature)

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 get a detailed step-by-step guide for connecting to GitHub.

11.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.

Make sure that you have Flutter installed on your system. Here are the instructions on how to set up Flutter.

11.4 Download APK (Paid Feature)

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:

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.

11.5 FlutterFlow CLI

You can also download the code using FlutterFlow CLI. See instructions here.

12. Share project

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.

  • The share feature can be used to create Marketplace items. You can learn more about this here.

13. Preview

You can use the Preview mode to quickly try out your app on a virtual device without waiting for it to build. 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.

This mode has a few limitations; 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 unsupported features is displayed in the Known Issues menu in Preview mode.

14. Testing

This menu allows you to run your app in Test or Run mode.

14.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 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.

  1. Switch to the app builder and make some changes, such as changing colors and alignment.

  2. Now switch to the Test mode tab and click Instant Reload or press Cmd/Ctrl + J to see the changes in under 10 seconds.

  • Try refreshing the page if you see a progress bar at the top of the device running for over 15 seconds.

  • The test mode button color indicates the following status:

    • Orange: Building

    • Green: Ready

    • Yellow: Expiring Soon

    • Red: Expired

14.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 can then interact with your app through your web browser.

To run the app in Run 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.

You can also copy and share links of your past builds or "run modes."

You can also switch between light and dark mode backgrounds in Test and Run Mode! This enhancement is especially beneficial for apps with 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.


Last Updated Date: March 26, 2024

Last updated