FlutterFlow Docs
Search…
Properties Panel
The Properties Panel is present on the right side of the UI Builder page. It displays all the properties that you can apply to customize any selected widget, present in your FlutterFlow canvas. From here you can also change the name of the selected widget or navigate to a different page by selecting one from the Page Selector dropdown.
The properties that you choose are only applied to the selected widget (or to the page if no widgets are selected). Even if you have several similar widgets, you will need to customize them individually. There are some properties (e.g. Font) that can be applied to your entire app, learn more about them here.
There are four main tabs inside the Properties Panel:
    1.
    Properties
    2.
    Actions
    3.
    Backend Query
    4.
    Animations
Let's take a look at them in more detail.

1. Properties

Under the Properties tab, you will find the widget properties that you can modify. When no widget is selected, this panel displays the page properties (i.e., Scaffold properties). Available properties will vary by widget type.
Page Elements Visibility is the only property common, other properties vary according to the widget selected.
Base Elements and Layout Elements have the Visibility, Padding, and Alignment properties common. The remaining properties will vary based on the widget selected.
Additional details on each widget are contained in the Widget section.

2. Actions

You can handle gestures, when a button is tapped, when it is double tapped, when a text field value is submitted and so on, from the Actions tab of the Properties panel. These actions differ according to the widget selected (on some widgets you can't apply any actions).
You can add an action to any widget, that supports it, by clicking on Add Action button and selecting the type of gesture to handle. The Action Type dropdown lets you select what type of action you want to perform, including Navigate, Authentication, Alert Dialog, Share, and many more. After that, you can set up and customize the action by selecting the appropriate properties.
Here's a short demo of applying the Navigate action to a button:
While using the Navigate action if you are navigating to a page that accepts one or more parameters, then you need to define the value(s) to pass in the Pass Parameters section.
You can apply multiple actions to any widget. If you have multiple same kinds of gestures then you can choose the order in which they are executed.
For example, let's say you have a button to upload an image to the database, in this case, you might need two onTap Actions, one for uploading the data and the other one for navigating to a different page, and they have to be performed in this exact order.
You can reorder actions by selecting the up and down arrows.

3. Backend Query

You can use this Backend Query section to define a query that will be triggered as this widget appears on the screen. The data that is loaded, can be accessed by all the widgets present in this parent widget from where the query is made.
To add a query, you have to select a Query Type from the dropdown menu. The type of queries that you can make are as follows:

Query Collection

For using this, you need to complete the Firebase setup for this project on FlutterFlow and should have a Firestore collection created that can be loaded here. Select your Firestore collection, then you can load a Single Record or a List of Records.
Only the widgets that support multiple children can load a list of records.

Document from Reference

This query can be used for retrieving the document from a Firebase DocumentReference that can be used for showing the data in a widget. A complete Firebase setup and a Firestore Collection are needed to perform this query as well.
In this query, you'll need to provide two things: (1) Firestore Collection and (2) Source for which you need to access the document reference.

API Call

You can trigger an API Call as the widget comes up on the screen. First, define an API call by going to the API Calls page from the Navigation Menu, and then specify the API Call Name here. If the API call takes any parameter, you can pass it by defining its name and value.
This query will return a list of matching records that can be used by the widgets of that screen. To use Algolia search, you should have a Firestore Collection connected to Algolia and configure it on FlutterFlow by going to Settings and Integrations > Integrations > Algolia. You can define this query by selecting a Firestore Collection and specifying the Search Term.

4. Animations

FlutterFlow lets you apply animations to a widget. Select the widget from the canvas that you want to apply the animation to, go to the last tab of the Properties Panel, and define the animation properties to customize it.
You can use the Preview button to play the animation of the selected widget, the Preview All button plays all the animations of the current page which helps to visualize how the app will react once the page is loaded up.

Additional properties

The widgets that can handle multiple children widgets have an additional tab called Generate Dynamic Children. It helps you to generate the children widgets from a List variable.
Some of the widgets that can handle multiple children are Column, Row, Stack, ListView, GridView & PageView. Using this tab you can select the Variable Name in which to store the values (so that it can be easily referenced in any other widget), Max Items, and the Source to use for getting the values.
Last modified 1mo ago