> ## Documentation Index > Fetch the complete documentation index at: https://docs.stac.dev/llms.txt > Use this file to discover all available pages before exploring further. # List View > Documentation for List View export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/"; export const listviewPreviewJson = { "type": "listView", "shrinkWrap": true, "separator": { "type": "container", "height": 10 }, "children": [{ "type": "listTile", "leading": { "type": "container", "height": 50, "width": 50, "color": "#165FC7", "child": { "type": "column", "mainAxisAlignment": "center", "crossAxisAlignment": "center", "children": [{ "type": "text", "data": "1", "style": { "fontSize": 21 } }] } }, "title": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item 1", "style": { "fontSize": 18 } } }, "subtitle": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item description", "style": { "fontSize": 14 } } }, "trailing": { "type": "icon", "iconType": "material", "icon": "more_vert", "size": 24 } }, { "type": "listTile", "leading": { "type": "container", "height": 50, "width": 50, "color": "#165FC7", "child": { "type": "column", "mainAxisAlignment": "center", "crossAxisAlignment": "center", "children": [{ "type": "text", "data": "2", "style": { "fontSize": 21 } }] } }, "title": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item 2", "style": { "fontSize": 18 } } }, "subtitle": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item description", "style": { "fontSize": 14 } } }, "trailing": { "type": "icon", "iconType": "material", "icon": "more_vert", "size": 24 } }, { "type": "listTile", "leading": { "type": "container", "height": 50, "width": 50, "color": "#165FC7", "child": { "type": "column", "mainAxisAlignment": "center", "crossAxisAlignment": "center", "children": [{ "type": "text", "data": "3", "style": { "fontSize": 21 } }] } }, "title": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item 3", "style": { "fontSize": 18 } } }, "subtitle": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item description", "style": { "fontSize": 14 } } }, "trailing": { "type": "icon", "iconType": "material", "icon": "more_vert", "size": 24 } }] }; export const listviewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`; The Stac ListView allows you to build a Flutter ListView widget using JSON. To know more about the listview widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/ListView-class.html). ## Properties | Property | Type | Description | | ----------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | scrollDirection | `StacAxis` | The Axis along which the scroll view's offset increases. | | reverse | `bool` | Whether the scroll view scrolls in the reading direction. | | primary | `bool` | Whether this is the primary scroll view. | | physics | `StacScrollPhysics` | How the scroll view should respond to user input. | | shrinkWrap | `bool` | Whether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed. | | padding | `StacEdgeInsets` | The amount of space by which to inset the children. | | addAutomaticKeepAlives | `bool` | Determines whether the children should be automatically kept alive (cached) when they are no longer visible, preserving their state. | | addRepaintBoundaries | `bool` | Determines whether each child widget is wrapped in a RepaintBoundary to optimize rendering by reducing unnecessary repaints. | | addSemanticIndexes | `bool` | Determines whether semantic indexes are assigned to the children, enabling accessibility tools to understand the order and structure of the list items. | | cacheExtent | `double` | The viewport has an area before and after the visible area to cache items that are about to become visible when the user scrolls. | | children | `List` | The widgets below this widget in the tree. | | separator | `StacWidget` | Defines a widget, to display between each pair of list items. | | semanticChildCount | `int` | The number of children that will contribute semantic information. | | dragStartBehavior | `StacDragStartBehavior` | Determines the way that drag start behavior is handled. | | keyboardDismissBehavior | `StacScrollViewKeyboardDismissBehavior` | Defines how this ScrollView will dismiss the keyboard automatically. | | restorationId | `String` | Restoration ID to save and restore the scroll offset of the scrollable. | | clipBehavior | `StacClip` | The content will be clipped (or not) according to this option. | ## Example ```dart theme={null} StacListView( shrinkWrap: true, separator: StacContainer(height: 10), children: [ StacListTile( leading: StacContainer( height: 50, width: 50, color: '#165FC7', child: StacColumn( mainAxisAlignment: StacMainAxisAlignment.center, crossAxisAlignment: StacCrossAxisAlignment.center, children: [ StacText(data: '1', style: StacTextStyle(fontSize: 21)), ], ), ), title: StacPadding( padding: StacEdgeInsets(top: 10), child: StacText(data: 'Item 1', style: StacTextStyle(fontSize: 18)), ), subtitle: StacPadding( padding: StacEdgeInsets(top: 10), child: StacText(data: 'Item description', style: StacTextStyle(fontSize: 14)), ), trailing: StacIcon(iconType: 'material', icon: 'more_vert', size: 24), ), StacListTile( leading: StacContainer( height: 50, width: 50, color: '#165FC7', child: StacColumn( mainAxisAlignment: StacMainAxisAlignment.center, crossAxisAlignment: StacCrossAxisAlignment.center, children: [ StacText(data: '2', style: StacTextStyle(fontSize: 21)), ], ), ), title: StacPadding( padding: StacEdgeInsets(top: 10), child: StacText(data: 'Item 2', style: StacTextStyle(fontSize: 18)), ), subtitle: StacPadding( padding: StacEdgeInsets(top: 10), child: StacText(data: 'Item description', style: StacTextStyle(fontSize: 14)), ), trailing: StacIcon(iconType: 'material', icon: 'more_vert', size: 24), ), // ... more items ], ) ``` ```json theme={null} { "type": "listView", "shrinkWrap": true, "separator": { "type": "container", "height": 10 }, "children": [ { "type": "listTile", "leading": { "type": "container", "height": 50, "width": 50, "color": "#165FC7", "child": { "type": "column", "mainAxisAlignment": "center", "crossAxisAlignment": "center", "children": [ { "type": "text", "data": "1", "style": { "fontSize": 21 } } ] } }, "title": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item 1", "style": { "fontSize": 18 } } }, "subtitle": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item description", "style": { "fontSize": 14 } } }, "trailing": { "type": "icon", "iconType": "material", "icon": "more_vert", "size": 24 } }, { "type": "listTile", "leading": { "type": "container", "height": 50, "width": 50, "color": "#165FC7", "child": { "type": "column", "mainAxisAlignment": "center", "crossAxisAlignment": "center", "children": [ { "type": "text", "data": "2", "style": { "fontSize": 21 } } ] } }, "title": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item 2", "style": { "fontSize": 18 } } }, "subtitle": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item description", "style": { "fontSize": 14 } } }, "trailing": { "type": "icon", "iconType": "material", "icon": "more_vert", "size": 24 } }, { "type": "listTile", "leading": { "type": "container", "height": 50, "width": 50, "color": "#165FC7", "child": { "type": "column", "mainAxisAlignment": "center", "crossAxisAlignment": "center", "children": [ { "type": "text", "data": "3", "style": { "fontSize": 21 } } ] } }, "title": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item 3", "style": { "fontSize": 18 } } }, "subtitle": { "type": "padding", "padding": { "top": 10 }, "child": { "type": "text", "data": "Item description", "style": { "fontSize": 14 } } }, "trailing": { "type": "icon", "iconType": "material", "icon": "more_vert", "size": 24 } } ] } ```