Flutter Recipes 1 : ListView recipes
Lists are an integral part of mobile applications. Being able to present a list of items is therefore an undeniably important thing to know as a mobile developer. In this article, I will provide various code recipes for implementing ListView in your Flutter applications. Let’s get started.
1. A very simple scrollable ListView
Can be used to display list of any number of items using any widgets. We must use this in cases where we have a small number of list views items.
class SimpleListView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ListTile(
title: Text("List item 1"),
),
ListTile(
title: Text("List item 2"),
),
ListTile(
title: Text("List item 3"),
),
ListTile(
title: Text("List item 4"),
),
ListTile(
title: Text("List item 5"),
),
],
);
}
}
2. Displaying predefined list of information two different ways
1. Using the spreading operator
Can be used when you have a predefined list of data that you want to display as well as render some widgets (Like header ) before the list of items and/or (Footer) after the list of items is displayed.
class SimpleListSpread extends StatelessWidget {
final List<String> items = [
"List item 1",
"List item 2",
"List item 3",
"List item 4",
"List item 5",
];
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ListTile(
title: Text("List item 0"),
),
...items.map(
(item) => ListTile(
title: Text(item),
),
),
ListTile(
title: Text("List item 6"),
),
],
);
}
}
2. Using builder
This is particularly useful if you have a list of data and just want to display those in a list. We use this constructor for cases where we have a large number of list view items because unlike ListView(children: <Widget>[])
ListView.builder(...)
constructor only build items that are visible in the screen. Each time the user scroll the list it builds the next visible item.
class SimpleListBuilder extends StatelessWidget {
final List<String> items = [
"List item 1",
"List item 2",
"List item 3",
"List item 4",
"List item 5",
];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) => ListTile(
title: Text(items[index]),
),
);
}
}
3. Creating infinite list using builder
This creates an infinite list of items in the screen as user scrolls the list
class SimpleInfiniteList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (context, index) => ListTile(
title: Text("List item $index"),
),
);
}
}
4. Separated list
This creates a list, where you can specify a divider widget to render between list items
class SimpleSeparatedList extends StatelessWidget {
final List<String> items = [
"List item 1",
"List item 2",
"List item 3",
"List item 4",
"List item 5",
];
@override
Widget build(BuildContext context) {
return ListView.separated(
itemCount: items.length,
itemBuilder: (context, index) => ListTile(
title: Text(items[index]),
),
separatorBuilder: (context,index)=>Divider(),
);
}
}
5. Prevent ListView from expanding to fill the area
You can do this by providing the shrinkwrap property to true. Once the shrinkWrap is set to true, the ListView only takes the space required by it to layout all the children.
class SimpleSeparatedList extends StatelessWidget {
final List<String> items = [
"List item 1",
"List item 2",
"List item 3",
"List item 4",
"List item 5",
];
@override
Widget build(BuildContext context) {
return ListView.separated(
shrinkWrap: true,
itemCount: items.length,
itemBuilder: (context, index) => ListTile(
title: Text(items[index]),
),
separatorBuilder: (context,index)=>Divider(),
);
}
}
6. ListView with fixed header and footer
Many times we would like to display a ListView with a fixed header and/or footer. For this we can wrap expanded ListView
by a Column
widget and add header and footer as we require as follows.
class ListWithHeaderFooter extends StatelessWidget {
final List<String> items = [
"List item 1",
"List item 2",
"List item 3",
"List item 4",
"List item 5",
];
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
child: Text("This is header"),
),
Expanded(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) => ListTile(
title: Text(items[index]),
),
),
),
Container(
child: Text("This is Footer"),
),
],
);
}
}
More over,
- You can set
scrollDirection
property toAxis.horizontal
to make a horizontal list view - You can set
reverse
property totrue
to change the scroll behavior, in opposite direction (end of the list to the begining) - You can set
physics
property to control the way scrolling takes place (NeverScrollableScrollPhysics, BouncingScrollPhysics (default for iOS), ClampingScrollPhysics (default for Android), FixedExtentScrollPhysics
Want to connect with me
Facebook: https://fb.me/lohanidamodar
GitHub: https://github.com/lohanidamodar
YouTube: https://youtube.com/c/reactbits
Twitter: https://twitter.com/LohaniDamodar
Linked In: https://www.linkedin.com/in/lohanidamodar/