Learn how to conditionally change the visibility of widgets.
You can choose to show or hide any element in your app based on a condition. This is done using the "Visibility" property that can be set on widgets and components.
The visibility option can be set to any "boolean" field that you have available on that page. This could come from a Firestore document field, or even a custom function.
Conditional Visibility Example
As you can see in the figure above, the likes count is only shown when a picture has any likes.
Let's continue with this example and see how to add conditional visibility on UI elements.
Adding Conditional Visibility comprises of the following steps:
You can skip this if you already have a page you would like to add conditional visibility to. Here's an example of how you can design a page that shows a list of pictures:
- Now, add the Container widget by dragging it from the same Layout Elements tab or add it directly from the widget tree.
After you have designed the page, make sure you display data from the backend. You can display the data using the instructions here.
See the likes count for the picture is displayed as 0 when a picture has no likes. Let's hide the likes count text(with count 0) using Conditional Visibility in the next section.
Conditional Visibility allows you to define a condition based on two values. The UI element can be displayed based on the result which can be True or False. If the result is True the UI element is displayed.
Conditional Visibility Example
As seen in the above figure, the UI element is displayed only when the First Value (likes_count) is greater than (>) 0 (Second Value).
Here's an example of how to apply Conditional Visibility to UI elements:
- Select the Widget that you would like to show/hide based on condition.
- Move to the Property Editor (on the right side of your screen) and scroll down to the Visibility section. Click on it to open the section.
- Click on the Unset text. (This will open a new panel).
- Find the Source dropdown, click on unset, and select the Condition.
- Under the Condition section, Click on the First Value text, set the Source to [collection] Record (from ListView).
- Set the Available Option to the Field that you want to compare with.
- Click on the Equal To dropdown and select the appropriate option from the list.
- Click on the Second Value text, set the Value Source to Specific Value.
- Set the Value to whatever you would like to compare it with the First Value.
When you run the app, see how the list shows likes count only when a picture has any likes.
You can use the Conditional Visibility fundamental to filter a list based on a condition. For example, you may display only favorite items from the full list.
To show ListView items based on condition:
- Select the first widget inside the ListView.
You can toggle "Show in UI Builder" to test the effect of showing/hiding that widget in the UI builder.
This option is only to help you visualize the effect of visibility on the widget and it does not affect your app.
To show/hide UI element in UI Builder:
- Select the widget from the widget tree or from the canvas area.
- Check/Uncheck the Show in UI Builder property to show/hide UI element.