Expandable

The Expandable widget expands or collapses to reveal or hide the item details. It is 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:
Changing the Properties
The Properties Panel can be used to customize the appearance and behavior of your widget.
Add Padding
​Here are the instructions on how to add padding.
Adjust The Alignment
​Here are the instructions on adjusting the alignment.
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:
To set to an exact size, select PX and enter the desired values.
To set the dimensions as a % of the screen size, select % and enter the desired value.
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 (
).
Changing Icon Size and Color
To change the Icon size and color, please find the instructions here.
Adding Icon Padding
To add some space around the 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 Icon Padding property and enter the desired value.
Click on the Refresh icon
 to reset the values.
Set color dynamically
See how to set a color from variable to any property of this widget.
Adding Action
To perform any action on click of the Header, Collapsed View, Expanded View, add an Action in FlutterFlow. You can find the instructions on adding the Action here.
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.
PageView
Wrap
Last modified 7mo ago