Flutter UI ListView Widget

Last Updated On Friday 21st Jan 2022
  • ListView is a very popular Flutter component.
  • It’s a linear scrollable widget that arranges its children linearly and supports horizontal and vertical scrolling.

A ListView has four constructors

Default constructor

It takes an explicit list of widgets called children.
That will construct every single child in the list, even the ones that aren’t visible.

You should use this if you have a small number of children.

ListView.builder()

It takes in an IndexedWidgetBuilder and builds the list on demand.

It will only construct the children that are visible onscreen.

You should use this if you need to display a large or infinite number of items.

	ListView.builder(
{Key? key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
double? itemExtent,
required IndexedWidgetBuilder itemBuilder,
int? itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double? cacheExtent,
int? semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId,
Clip clipBehavior = Clip.hardEdge}
)
	

ListView.separated()

It takes two IndexedWidgetBuilders

  • itemBuilder
  • seperatorBuilder.

This is useful if you want to place a separator widget between your items.

	ListView.separated(
{Key? key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
required IndexedWidgetBuilder itemBuilder,
required IndexedWidgetBuilder separatorBuilder,
required int itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double? cacheExtent,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId,
Clip clipBehavior = Clip.hardEdge}
)
	

ListView.custom()

It gives you more fine-grain control over your child items

	const ListView.custom(
{Key? key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
double? itemExtent,
required SliverChildDelegate childrenDelegate,
double? cacheExtent,
int? semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId,
Clip clipBehavior = Clip.hardEdge}
)
	

Example

	Flexible(
    child: ListView.builder(
        itemCount: 10,
        itemExtent: 60,
        itemBuilder: (BuildContext contenxt, int index) {
            return Container(
                height: 70,
                child: Card(
                color: Colors.blue,
                child: Center(child: Text("$index")),
                ),
            );
        },
    ),
),
	

References

ListView Widget

ListView.builder

ListView.seperated

ListView.custom