FlutterFlow Docs
Tool Bar
The Tool Bar is present on top of the UI Builder page. It consists of various buttons for configuring your project, debugging any issues, and for building your app directly in FlutterFlow.
Let's review the options present on the Tool Bar.

1. Canvas Size

The canvas size is defined as width (in pixels) x height (in pixels). This size is determined according to the device selected but you can also use a custom canvas size. To set a custom canvas size, click on the Canvas Size button present on the Tool Bar and enter the width and height (in pixels) that you want to use.

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

3. 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 will get access to the FlutterFlow Community Forum and the YouTube channel from here.
You will also find these links on the Introduction page of this documentation.
You will also find an option to submit feedback.

4. Project Issues

If there are any issues present in your current project that might result in a build failure or app crashing, it would be displayed in this section. You can click this button to view a short description of each issue and navigate to the location where you can fix the issue by clicking on the respective issue.

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

(i) View Code

This option will let 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.

(ii) 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 > GitHub tab.
From this page, you can configure your project to add GitHub integration to it. This will allow you to upload the entire Flutter app codebase to a repository on a new branch called flutterflow.
You can get a detailed step-by-step guide for configuring GitHub here.

(iii) 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.
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.
Now, you can test your Flutter app by running it on an emulator/Simulator, or on your physical device.

6. 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:
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.

7. 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.
You can share a copy of your Run Mode app using these steps:
    Once run mode is complete, select Make Public
    Share the link. It should be copied into your clipboard. If this doesn't work, make sure you have Clipboard enabled.
To make your project private at a later time, open the link you shared and select Make Private.
Quickounce app in Run mode

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. 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.
Last modified 2d ago