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 or page. From here you can also change the name of the selected widget or page or navigate to a different page by selecting one from the Page Selector dropdown.
Properties Panel
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.
The Page Selector dropdown menu allows you to change/select the page from the list of all the pages added to your project. By default, it shows the currently selected page and opens up a list of all pages when you click on it. It also allows you to create a new page and view all your pages in a grid view.
.gif?alt=media&token=443b3789-bcdd-4091-9b44-487e5cafd004)
Page Selector
When you select any widget, its name appears on the properties panel. The default name for any widget is its type. For example, if you select the Container widget the name appears as Container. However, you can use the edit icon on the right to change its name.
.gif?alt=media&token=766b4b78-5cce-4635-a26f-0b84dd3632ad)
Widget Name
This button allows you to create the Custom Component from the widget you have selected. Custom Component is a widget that can be reused and stylized throughout your app. Custom Component can save a lot of your time by creating components for all the common widgets (that share the same style or behavior) in your app such as Buttons, TextField, and so on.
The Actions allows you to define what should happen when a user interacts with the app elements/widgets such as tapping on a button.
You can add an action to any widget, that supports it. Actions can be added to the user gestures such as On Tap, On Double Tap, Long Press. There are also two more additional triggers such as On Submit to call an action when a user completes entering a message in TextField and On Page Load to call an action when the page is loaded.
Actions differ according to the widget selected (on some widgets you can't apply any actions).
Actions are categorized into Navigation, Backend/Database, UI interactions, Alerts, E-commerce/Payments, and Animation.
.gif?alt=media&token=6bd9b447-b7ed-4f27-9557-bb537b35e1ba)
Actions
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 by clicking on the + button on the already added action. Multiple actions are executed in the order they are added.
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.
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.
For Page Elements Visibility is the only property common, other properties vary according to the widget selected.
For Base Elements, Layout Elements, and Form Elements Visibility, Padding, and Alignment properties are common. The remaining properties will vary based on the widget selected.
Additional details on each widget are contained in the Widget section.
Properties
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 widget.
.gif?alt=media&token=c771a8fd-a224-48e8-8375-232f827e02c7)
Backend Query
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:
- 1.Query Collection
- 2.Document from Reference
- 3.API Call
- 4.Algolia Search
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. Learn more about how to query a collection.
Only the widgets that support multiple children can load a list of records.
This query can be used for retrieving a single document from inside the collection. That's called Querying a Document.
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. If the API call takes any parameter, you can pass it by defining its name and value. Learn more about how to add API calls.
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. Learn more about how to add Algolia Search.
The widgets that can handle multiple children widgets have an additional tab called Generate Dynamic Children. It helps you to generate multiple child widgets from a List variable.
This is usually helpful when you are retrieving data from an API call.
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.
.gif?alt=media&token=9fb83a56-fff4-44b7-a07b-95605afe41e4)
Generate Dynamic Children
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.
.gif?alt=media&token=7b7ada97-23ef-47a5-9e86-b4d7dc06bdf1)
Animation
Last modified 1yr ago