Skip to main content

Toolbar

The Toolbar, located at the top of the app builder, provides easy access to numerous tools and features. It includes options for project configuration, saving your app version, accessing help, reporting or debugging issues, viewing project comments, downloading your app code, and running your app directly in FlutterFlow.

toolbar

Project info​

Hovering over this section reveals the essential information about your project. Here, you can easily check the project name, branch name, environment name and 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.

Help​

From here, you will get access to essential resource links that will come in handy while building your apps.

  1. Search Docs: If you are a paid user, we allow you to conduct a direct search from our documentation.
  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.
  3. Feedback: You can provide feedback and help us improve the product.
  4. Bug report: You can submit a bug report from here.
  5. Tutorials: You can start the tutorial for building your first app right inside FlutterFlow.
  6. FAQs and Docs: While building your app, you might need to consult our official documentation frequently. This option will redirect you to FlutterFlow documentation.
  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 option, you can directly access the updates regarding what's new in FlutterFlow.
  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.
  9. Show/Hide Chat: You can use this option to show or hide the chat button at the bottom right of the app builder.

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. Select this option to see all the shortcuts.

keyboard-shortcut.avif

Command Palette​

The Command Palette makes it easy to find and use things in the App Builder. 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 right arrow – we'll show you every place. To directly access the item, just click on it.

command-palette.avif

AI Tools​

FlutterFlow AI Tools is a powerful set of features designed to speed up app development by leveraging artificial intelligence. These tools allow you to quickly generate app elements such as pages, components, and even entire page layouts with relevant widgets automatically populated.

New Page Creation​

Instantly create pages in your app from a prompt. To create a page, open the AI Tools menu from the Toolbar. Next, select New Page Creation and enter a description for your page.

New Component Creation​

Aside from pages, you can also create Components directly from a prompt. To create a component, open the AI Tools menu from the Toolbar. Next, select New Component Creation and enter a description for your UI component.

Sketch To Component​

Sketch to Component allows you to add a sketch of your Component. This sketch can include outlines of widgets or layouts to incorporate, and it can also include annotations that tell the AI tool more about the design you have in mind.

To create a Component from a sketch, open the AI Tools menu from the Toolbar. Next, select Sketch to Component and draw directly in the input or upload an image file of your sketch.

Page Autocomplete​

Page Autocomplete intelligently adds relevant widgets to a page based on the pages’s context, making it easy to complete partially built pages. The project context includes the existing widgets and design of those widgets, as well as the page's description.

If the page does not have a description, you will be asked to describe what you want the page to contain.

To use Page Autocomplete, open the AI Tools menu from the Toolbar. Next, and select Page Autocomplete on the page that you want FlutterFlow AI to complete.

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.

Project history​

Understand the crucial concepts of project history, such as saving and versioning here.

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.

info

To tag users, select the @ symbol and choose the project team member(s).

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.

info

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

Optimization.avif

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

Errors vs Warnings

Errors prevent your app from compiling and running. These must be resolved in order to run the app. They can be due to missing actions, errors in custom code, incorrect data types, and so on.

Warnings while not preventing compilation, indicate potential issues such as incorrect rules setup or performance problems. Although it's possible to ignore warnings, addressing them can enhance the quality of your app and prevent future issues.

Warning-and-errors.avif

Branching​

Branching enables you to create a separate copy of your existing project, allowing you to develop new features without affecting the current functionality.

Developer menu​

The Developer Menu provides developers with access to tools such as code viewing, GitHub integration, and source code download capabilities.

  1. View Code: This option lets you display the Dart code for all the pages of your FlutterFlow project. You can also take a look at the dependencies being used by the app here.

  2. Connect GitHub Repo: You can use this option to connect and upload your project to GitHub repository. See the step-by-step guide here.

  3. Download Code: You can download the entire codebase of the app generated by FlutterFlow using this option.

  4. Download APK: Use this to generate a release build of your Android app. It will automatically download the .apk file after the building process is complete.

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

note

Connect GitHub Repo, Download Code, and Download APK features requires a paid plan.

  1. Open in VSCode: This option lets you open your entire FlutterFlow project in a VS Code environment, offering a richer development experience. You’ll have real-time autocomplete and error detection, easier access to existing Flutter & Dart tooling, and the ability to leverage the AI ecosystem.

  2. Refactor Project: This option opens your FlutterFlow project in a YAML-based file editor, allowing you to perform bulk edits more efficiently. You can search, edit, and replace values across multiple files—useful for renaming keys, updating data types, or migrating resources to a Library. Check out the Refactor Project documentation for more details.

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.

note
  • 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.

Preview​

You can use this option to run your app in Preview mode.

Testing​

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