Skip to content

List Layouts

After mastering Row and Column, use list widgets such as ListView for data-heavy screens.

List layouts make it easier to present large content sets in structured, scrollable interfaces.

  • ListView: 1D scrolling list.
  • GridView: 2D grid layout.
  • MasonryGrid: Uneven-height cards in fixed columns.

List Layouts

ListView Properties

ListView is the most commonly used 1D scrolling layout.

1. Property Summary

Property Type Default Description
visible bool true Excluded from layout when false
scrollDirection Enum vertical Scroll direction (vertical, horizontal)
reverse bool false Reverses scroll direction
itemCount int 0 Number of rendered items
padding EdgeInsets 0.0 Inner list padding
physics Enum unset Scroll physics (bouncing, clamping, etc.)
shrinkWrap bool false Shrinks size to content
controller Controller - Controls and observes scroll position
addAutomaticKeepAlives bool true Preserves item state outside viewport
clipBehavior Enum hardEdge Clipping behavior for overflow content

2. Tips

  • scrollDirection + reverse

    • Use horizontal for card carousels.
    • Use reverse: true for chat-style lists.

  • physics

    • bouncing: iOS-like bounce.
    • clamping: Android-like clamp.
    • neverScrollable: Disable scrolling.

  • shrinkWrap

    • Keep false when possible for better performance.
    • Set true when embedding inside another scrollable container.

Tip

Use controller to implement infinite scrolling by loading more items at the end of the list.

GridView Properties

GridView places children in a scrollable 2D grid. It is useful for galleries, product grids, and tile layouts.

1. Property Summary

Property Type Default Description
visible bool true Excluded from render and layout when false
onSelected Action unset Action when an item is selected
crossAxisType Enum count Column sizing mode (count, extent)
crossAxisCount int 1 Number of columns when type is count
crossAxisExtent double - Column width when type is extent
childAspectRatio double 1.0 Item width/height ratio
mainAxisSpacing double 0.0 Spacing along scroll axis
crossAxisSpacing double 0.0 Spacing across columns
padding EdgeInsets 0.0 Grid inner padding
scrollDirection Enum vertical Scroll axis
physics Enum unset Scroll physics
controller Controller - Scroll controller
shrinkWrap bool false Shrink to content height
itemCount int 0 Total item count
clipBehavior Enum hardEdge Overflow clipping behavior

2. Tips

  • Column strategy

    • count: fixed number of columns.
    • extent: adaptive columns by max width.

  • Aspect ratio

    • 1.0 is square.
    • 2.0 is wider than tall.

  • Spacing

    • mainAxisSpacing and crossAxisSpacing control item gaps.
    • padding controls outer inset.

  • Performance

    • Keep shrinkWrap as false for large datasets.