FlutterFlow Docs
Navigation Menu
The left-most menu on your FlutterFlow project page is called the Navigation Menu. It gives you access to the project's user interface builder, widget tree, and helps you to navigate to pages for adding project features, including the Firestore database, setting up API calls, uploading image assets, and adding integrations.

1. Dashboard

The home icon leads you to the Dashboard page. From here you can navigate to existing projects or manage your projects (create new projects, remove existing projects, or duplicate a project). You can also access your account information and links to the various FlutterFlow resources.

2. Select Page and Component

This panel lets you create new Pages or Components for your app. You also have options to delete and duplicate a page or a component. Pages can also be reordered from the Pages tab.

3. UI Builder

The UI Builder gives you access to all the widgets (or elements) that can be added to the application. You can customize the widgets by modifying their properties, define actions, make them dynamic by connecting to backend queries, and apply animations.

4. Widget Tree

The Widget Tree panel gives you a high-level overview of all the widgets that you have added to a selected page. The widget tree shown will change based on the page you have selected. You can change the page shown using the Properties panel (on the right). There's one more advantage to this widget tree view, you can add widget new child widgets directly from the widget tree.

5. Firestore Collections

On the Firestore page, you can create database collections using Firebase (you should have your Firebase setup complete to access this page). You also have access to modify the database schema defined inside any Collection. To view your Firestore Security Rules along with their deployment status, head over to the Settings tab of your Firebase console.
Learn more about Firebase on FlutterFlow here.

6. API Calls

You can define custom API calls here. Simply select your API call method type, add your API URL, Headers & Parameters, and you are ready to go. Now, you can hook up the API call to any UI component using Actions.

7. Project Media/Assets

From this page, you can upload any image assets that you want to use while building your app. You can also remove any asset that you no longer need.

8. Custom Functions

You can define your own functions using Dart code that can be used anywhere in the project on FlutterFlow. For defining a custom function, click on the Create Function button, specify the Function Name, Return Type, and Function Arguments. Then, add your Dart code inside the function, for example:
int calculateFactorial(int number) {
if (number <= 0) {
return 1;
} else {
return (number * factorial(number - 1));
You can reference this function anywhere in your project just by using the function name.

9. Settings and Integrations

On this page, you can modify your project name and package name. From here, you can also customize various app settings including launcher icon, splash screen image, initial page to be loaded, as well as some design settings (like colors palette, typography, and so on). The integrations offered by FlutterFlow are also accessible from this page - Firebase, Algolia, Google Maps, AdMob, and payments (using Braintree or PayPal). You can also invite your team members to the FlutterFlow project by going to the Team tab.
Last modified 2mo ago