In Flutter, ListView is a scrollable list of widgets arranged linearly. It displays its children one after another in the scroll direction i.e, vertical or horizontal.
There are different types of ListViews :
- ListView
- ListView.builder
- ListView.separated
- ListView.custom
Constructor of ListView Class:
ListView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)Constructor of ListView.builder Class:
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}
)Constructor of ListView.custom Class:
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}
)Constructor of ListView.separated Class:
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}
)Properties of ListView Widget:
- childrenDelegate: This property takes SliverChildDelegate as the object. It serves as a delegate that provided the children for the ListView.
- clipBehaviour: This property holds Clip enum (final) as the object. It controls whether the content in the ListView will be clipped or not.
- itemExtent: The itemExtent takes in a double value as the object to controls the scrollable area in the ListView.
- padding: It holds EdgeInsetsGeometryI as the object to give space between the Listview and its children.
- scrollDirection: This property takes in Axis enum as the object to decide the direction of the scroll on the ListView.
- shrinkWrap: This property takes in a boolean value as the object to decide whether the size of the scrollable area will be determined by the contents inside the ListView.
ListView()
This is the default constructor of the ListView class. A ListView simply takes a list of widgets and makes it scrollable. Usually, this is used with a few children as the List will also construct invisible elements in the list, so numerous widgets may render this inefficiently.
ListView( padding: EdgeInsets.all(20),
children: <Widget>[
CircleAvatar(
maxRadius: 50,
backgroundColor: Colors.black,
child: Icon(Icons.person, color: Colors.white, size: 50),
),
Center(
child: Text(
'Sooraj S Nair',
style: TextStyle(
fontSize: 50,
),
),
),
Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum,It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
style: TextStyle(
fontSize: 20,
),
),
],
),
|
Output:
ListView.builder()
The builder() constructor constructs a repeating list of widgets. The constructor takes two main parameters:
- An itemCount for the number of repetitions for the widget to be constructed (not compulsory).
- An itemBuilder for constructing the widget which will be generated ‘itemCount‘ times (compulsory).
If the itemCount is not specified, infinite widgets will be constructed by default.
ListView.builder( itemCount: 20,
itemBuilder: (context, position) {
return Card(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
position.toString(),
style: TextStyle(fontSize: 22.0),
),
),
);
},
),
|
Output:
ListView.separated ()
The ListView.separated() constructor is used to generate a list of widgets, but in addition, a separator widget can also be generated to separate the widgets. In short, these are two intertwined list of widgets: the main list and the separator list. Unlike the builder() constructor, the itemCount parameter is compulsory here.
ListView.separated( itemBuilder: (context, position) {
return Card(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Text(
'List Item $position',
),
),
);
},
separatorBuilder: (context, position) {
return Card(
color: Colors.grey,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
'Separator $position',
style: TextStyle(color: Colors.white),
),
),
);
},
itemCount: 20,
),
|
Output:
ListView.custom()
As the name suggests, the ListView.custom() constructor lets us build ListViews with custom functionality for how the children of the list are built. The main parameter of this constructor is a SliverChildDelegate which builds the items.
The types of SliverChildDelegates are :
- SliverChildListDelegate
- SliverChildBuilderDelegate
The SliverChildListDelegate accepts a list of children widgets. whereas the SliverChildBuilderDelegate accepts an IndexedWidgetBuilder, simply a builder() function. Digging deeper, we can infer that ListView.builder was created using a ListView.custom with a SliverChildBuilderDelegate. Also, the default ListView() constructor is a ListView.custom with a SliverChildListDelegate.