Expandable

The Expandable widget expands or collapses to reveal or hide the item details. It consists of Header, Collapsed View, Expanded View. The Expandable widget is typically used to populate a ListView to create the 'expand/collapse' item entry.

For example, you can use the Expandable to show a list of book chapters or a list of hotels that shows minimum details at first and reveals more information when expanded.

Add Expandable to Your Project

Here's an example of how you can use an Expandable widget in your project:

First, drag the ListView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
Drag the Expandable widget from the Layout Elements tab and drop it inside the ListView.
If you see the Container widget wrapped around the Expandable widget, select it and remove its height.
Under the Header, select the Text widget and set its text to Chapter 1.
Under the Collapsed View -> Container, select the Text widget and set its text to 2 Sections.
Under the Expanded View -> Column, select the Text widget and change its text the Section 1.
Under the Expanded View -> Column, add a few more Text widgets.
Under the Expanded View -> Column, bring the image to the top and make it a first child of the Column.

When you add the Expandable widget, The Header, Collapsed View, and Expanded View are filled with some dummy data.

At this point, you have one item added to the list. To fill the ListView with more items simply copy-paste the Expandable widget.

To copy-paste the Expandable widget:

Select the Container wrapped around an Expandable widget.
Right-click on it and select Copy. You can also use the keyboard shortcut Ctrl+C or Command+C.
Select the ListView widget.
Right-click on it and select Paste. You can also use the keyboard shortcut Ctrl+V or Command+V.
Edit the new entries.

After adding a number of items, the list created using Expandable looks like this:

Trigger action on expand or collapse

Let's see how to trigger an action when the widget is expanded or collapsed. This is helpful when you want to load content only when the widget is expanded to optimize performance and reduce initial loading times.

To do so:

Select Expandable widget, select Actions from the properties panel (the right menu), and click + Add Action.
You will notice that the Type of Action (aka callback) is already set to On Toggle. That means actions added under this will be called whenever the widget is either expanded or collapsed.
You can check if the current widget is expanded or collapsed using the Set from Variable menu > Widget State > [Expandable widget name] is expanded property.
From here onwards, you can add any action.

Here is an example of displaying the snackbar message only when the widget is expanded.

Showing Firestore Data

To show the data retrieved from your Firestore collection and document into the widget, ensure you:

Understand Structuring the Firebase Database.
Completed all steps in the Firebase Setup section for your project.
Retrieved Data from either collection or document.
Finally, to show data into the Expandable widget, follow the steps here.

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Toggle Expanded/Collapsed View in Editor

Changing the Expanded/Collapsed view helps you edit/design each type of view in the editor.

To toggle the Expanded/Collapsed view in the editor:

Select the Expandable from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Expandable Properties section.
Find the Active View property, change it to Collapsed or Expanded.

You can also see the Collapsed/Expanded view in the editor by selecting it from the widget tree on the left.

Showing Item as Expanded

Sometimes you may want to show the item as expanded prior to the user interaction. This can help users know about the expand/collapse interaction. You can do so by using the Initially Expanded property.

To make the item show expanded view initially:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Interaction Properties section.
Checkmark the Initially Expanded property. (Click on it)

Disable Tap on Header

Sometimes you may want to allow users to toggle the expand/collapse view only when they click on the arrow icon.

To disable tap on header:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Interaction Properties section.
Uncheck the Tap Header to Toggle. (Click on it)

Show Expanded View on Body Tap

When the item is collapsed, the expanded view opens when you tap either on the header or arrow icon. However, you can also open the expanded view on the tap of the body i.e collapsed view.

To show expanded view on tap of the body:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Interaction Properties section.
Checkmark the Tap Body to Expand. (Click on it)

Show Collapsed View on Body Tap

When the item is expanded, the collapsed view opens when you tap either on the header or arrow icon. However, you can also open the collapsed view on tap of the body i.e expanded view.

To show collapsed view on tap of the body:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Interaction Properties section.
Checkmark the Tap Body to Collapse. (Click on it)

Changing Header Background Color

To change the background color of the Expandable header:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Style Properties section.
Find the Background Color property, click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Aligning Header

To align the header text in a vertical direction:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Style Properties section.
Find the Header Alignment dropdown and select from the options that include Top, Center, Bottom.

Changing The Size

To change the size of the Expandable widget:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Style Properties section.
Find the Width and Height property.
There are three ways to set dimensions:
1. To set to an exact size, select PX and enter the desired values.
2. To set the dimensions as a % of the screen size, select % and enter the desired value.
3. To make the height or width of the Expandable the screen's height or width, just click on the infinity icon ().

Keeping the height property empty will adjust the height as per the content inside the expanded view.

Hiding Arrow Icon

In a very rare case, you may want to hide the arrow icon (which is used to control the expand/collapse behavior).

To hide the arrow icon:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Icon Properties section.
Uncheck the Has Icon property. (Click on it)

If you decide to hide the arrow icon, make sure you keep the Tap Header to Toggle property enabled. Otherwise, you won't be able to open the expanded view.

Changing Collapsed Icon

The Collapsed icon is the icon that is shown when the collapsed view is visible.

To change the collapsed icon:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Icon Properties section.
Find the Collapsed Icon property, click on the None button then search and select the icon name from the image picker popup.
To get back to the default icon, click on the cancel icon ().

Changing Expanded Icon

The Expanded icon is the icon that is shown when the expanded view is visible.

To change the expanded icon:

Select any Expandable from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Icon Properties section.
Find the Expanded Icon property, click on the None button then search and select the icon name from the image picker popup.
To get back to the default icon, click on the cancel icon ().