Properties Panel

The Properties Panel allows you to customize the visual appearance and behavior of the widget and page. You can also access other tabs for specifying Actions (e.g., onTap and onSubmit), setting Backend Query (for any API call or Firebase collection), and adding Documentation and Animations to the selected widget. Additionally, when the page is selected, you can see an option to add a page state variable.

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, Colors) that can be applied to your entire app. learn more about them here.

From here, you can customize the properties for the selected widget, which may vary based on the type of widget.

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.

2. Create a component

This button allows you to create a Component from the widget you have selected.

3. Save as a template

This button allows you to save the selected widget as a template widget.

This button allows you to save the selected widget as a theme widget.

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

For Page Elements, Visibility is the only common property; other properties vary according to the widget selected.

For Base Elements, Layout Elements, and Form Elements Visibility, Padding and Alignment properties are common.

See how to modify some common widget properties.

6. Actions

The Actions allow you to define what should happen when a user interacts with the app elements/widgets, such as by tapping on a button.

Actions differ according to the widget selected (on some widgets, you can't apply any actions).

Learn more about adding actions here.

7. Backend Query

You can use this to define a query that will be triggered as soon as the widget appears on the screen. When data is loaded, it can be accessed by all the widgets present in this widget.

Learn more about adding a backend query here.

8. Generate Dynamic Children

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.

9. Animations

You can apply animations to a widget. Learn more about adding animations here.

10. Documentation and Semantic Labels

From here, you can add documentation and semantic labels for your widgets.

Page Properties

From here, you can customize the properties for the selected page.

1. Page Properties

Using the page properties, you can change the behavior and appearance of the current page. Here are they:

Visibility: Use this to control the opacity of a page.
Background Color: Use this to change the background color of the page.
Safe Area: This is used to automatically adjust the layout so that it doesn't overlap with system-specific areas, such as notches, status bars, or device-specific rounded corners. This property is enabled by default to ensure that your app's content is visible and accessible without being obscured by these system elements.
Hide Keyboard on Tap: This option is enabled by default to implement a common behavior in mobile applications where the virtual keyboard is automatically dismissed when the user taps outside of any TextField widget. This feature improves the user experience by allowing them to easily dismiss the keyboard and interact with other elements of the app.

You can also configure the Nav Bar Item Properties for the current page. See how to set up the Nav Bar.

2. Actions

You can add the following types of actions on the selected page.

On Page Load: Actions added under this are triggered as soon as the page is visible to users. This is useful when you want to perform certain tasks when the page is loaded, such as making an API call to fetch data that needs to be displayed on the page.
On Phone Shake: Actions added under this are triggered when the user shakes their phone. This is useful when you want to perform certain tasks or trigger specific actions in response to a phone shake gesture. For example, you can use this to build functionalities like:
- Randomizing content: Shake the phone to generate a random number, display a random quote, or change the background image.
- Refreshing data: Shake the phone to trigger a data refresh, such as fetching the latest news articles or updating a live feed.
- Resetting the app state: Shake the phone to reset the app state, clear form fields, or return to the app's home screen.

Learn more about adding actions here.

3. Backend Query

You can use this to define a query that will be triggered when the screen is visible. All the widgets on this page can access the backend query result.

Learn more about adding a backend query here.

4. Page State Variable

You can create and utilize the variables that are specific to the selected page, which is not shared with any other pages in your app. Learn more about adding page state variables.