FlutterFlow Docs
Search…
ListView
The ListView widget is used to show a large number of items as a scrollable list. ListView is an advanced version of the Column widget that automatically provides scrolling when the list of items won't fit on the screen.
You can use the ListView to show the list of items either vertically or horizontally.

Add a ListView to Your Project

Here's an example of how you can use a ListView 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.
    Now add as many Image widgets as you can. Again simply drag it from the Layout Elements tab or add it directly from the widget tree.
To create a ListView widget with custom items:
    First, Drag the ListView widget from the Layout Elements tab (in the Widget Panel).
    Now, add the Container widget by dragging it from the same Layout Elements tab or add it directly from the widget tree.
    Drag and drop the Row widget inside the added Container.
    Add one Image widget inside the Row.
    Add the Text widget inside the Row and set its Theme Text Style to Title 1 under the Text Property section from the Property Editor. Also, set its L (Left) padding to 10.
    Add an IconButton widget, click the default icon Add Box Outlined + under the icon section from the Property Editor, then search and select the chevron_right_sharp icon.
At this point, you have one item added to the list. To fill the ListView with more items simply copy-paste the Container widget. You can also change the image inside the Image widget to make all items look different.
To copy-paste a Container widget:
    Select the Container 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.
After adding a number of items the ListView looks like this:

Changing the Properties

The Properties Panel can be used to customize the behavior of your ListView widget.

Add Padding

Adding a padding value allows for adjusting the overall size of the ListView widget.
To add a Padding:
    Select the ListView from the widget tree or from the canvas area.
    Move to the Property Editor and navigate to the Padding section.
    Enter the desired value.
    Click on the Refresh icon
    to reset the values.
Use the
Lock button to change the Left, Top, Right, and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.

Showing Items Horizontally

In the example above you learned how to add items vertically, which is a default axis for laying out children for ListView.
To show items horizontally:
    Select the ListView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the ListView Properties section.
    Spot the Axis dropdown, change it to Horizontal.
In the above visual, the Axis to Horizontal is not properly displaying. In some cases, switching the axis may require you to redesign the item.
To correct the item layout for horizontal direction:
    Wrap the Row inside the Column by right-clicking on Row, select the Wrap Widget option and then click on Column. You can also select the Row widget and then hit the shortcut (⌘ + B).
    Drag the Text and IconButton widget outside of Row and put it inside the Column.
    Set the Text widget's Theme Text Style to Body Text 1.
    Drag the Row widget up and make it the first child of the Column.
    Apply this to all items or simply copy-paste the modified item.
The updated item for horizontal layout looks like this:

Shrinking the ListView

By default, the ListView widget takes up all of the available space in its main axis. That means if the Axis property is set to Vertical, ListView will occupy all vertical space on the screen. Similarly, if the Axis is set to Horizontal then ListView will reserve all the horizontal space.
To make the ListView only take the size of its children:
    Select the ListView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the ListView Properties section.
    Checkmark the Shrink Wrap check box.
Below you can see how the Green color selection for ListView shrinks down when Shrink Wrap is checked.
Last modified 1mo ago