Physics ListView Flutter

A ListView in Flutter is a linear list of scrollable items. We can use it to make a list of items scrollable or make a list of repeating items.

Exploring the types of ListView

Well start with looking at the types of ListViews and later look at the other features and neat modifications for it.

Lets look at the types of ListViews there are:

1. ListView
2. ListView.builder
3. ListView.separated
4. ListView.custom

Lets go around exploring these types one by one:

This is the default constructor of the ListView class. A ListView simply takes a list of children and makes it scrollable.

A List contructed using the default constructor:

The general format of the code is:

ListView[ children:[ ItemOne[], ItemTwo[], ItemThree[], ], ]

Usually this should be used with a small number of children as the List will also construct the invisible elements in the list and a large amount of elements may render this inefficient.

ListView.builder[]

The builder[] constructor constructs a repeating list of items. The constructor takes two main parameters:An itemCount for the number of items in the list and an itemBuilder for constructed each list item.

A List contructed using the builder[] constructor:

The general format of the code is:

ListView.builder[ itemCount:itemCount, itemBuilder:[context,position]{ return listItem[]; } ]

The list items are constructed lazily,meaning only a specific number of list items are constructed and when a user scrolls ahead,the earlier ones are destroyed.

Neat trick: Since the elements are loaded lazily and only the needed number of elements are loaded,we dont really need an itemCount as a compulsory parameter and the list can be infinite.

ListView.builder[ itemBuilder:[context,position]{ return Card[ child:Padding[ padding:const EdgeInsets.all[16.0], child: Text[position.toString[],style:TextStyle[fontSize:22.0]] ], ]; } ]

A ListView without the itemCount parameter:

ListView.separated[]

In the separated[] constructor,we generate a list and we can specify the separator between each item.

A ListView constructed using the ListView.separated[] constructor:

In essence,we construct two interweaved lists: one as the main list,one as the separator list.

Note That: the infinite count discussed in the earlier constructor cannot be used here and this constructor enforces an itemCount.

The code for this type goes as:

ListView.separated[ itemBuilder: [context, position] => Card[ child: Padding[ padding: const EdgeInsets.all[16.0], child: Text[ 'main list $position', style: TextStyle[fontSize: 22.0, fontWeight: FontWeight.bold], ], ], ], separatorBuilder: [context, position] { if [position % 2 == 0 && position _DeepDiveHomeState[]; } class _DeepDiveHomeState extends State { FixedExtentScrollController fixedExtentScrollController = new FixedExtentScrollController[]; final mothsOfTheYear = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; @override Widget build[BuildContext context] { return Scaffold[ appBar: AppBar[ title: Text['Deep Dive Flutter'], ], body: ListWheelScrollView[ controller: fixedExtentScrollController, physics: FixedExtentScrollPhysics[], children: mothsOfTheYear.map[[month] { return Card[ child: Row[ children: [ Expanded[ child: Padding[ padding: const EdgeInsets.all[8.0], child: Text[ month, style: TextStyle[fontSize: 18.0], ], ], ] ], ], ]; }].toList[], itemExtent: 60.0, ], ]; } }

A few more things to know

How to keep elements that get destroy alive in a list?

Flutter provides a KeepAlive[] widget which keeps an item alive which would have otherwise be destroyed. In a list,elements are wrapped by default in a AutomaticKeepAlive widget.

AutomaticKeepAlives can be disabled by setting the addAutomaticKeepAlives field to false. This is useful in cases where the elements dont need to be kept alive or for a custom implementation of KeepAlive.

Why does my ListView have space between the list and the outer Widget?

By default,a ListView has padding between it and the outer widget,to remove it,set padding to EdgeInsets.all[0.0].