ListView is basically a list of items. Users can scroll vertically or horizontally to see more items whenever the list is too big to fit on screen. This article covers the basics of 4 types of ListView in Flutter. I realize how precious your time is, so I’m going to get straight to the point!
We’ll be covering the following types of ListView:
- ListView
- AnimatedListView
- ListWheelScrollview
- Reorderable list view
Do you want to stay updated in Flutter world? Please click on subscribe button to get an email when the new tutorial is published.
▰▰▰▰▰ ListView ▰▰▰▰▰
This type of ListView is widely used in app development as it offers most of the things one needs.
The basic code looks like this
ListView(
children: <Widget>[
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
ListTile(
title: Text('Item 3'),
),
],
)
Let’s make it Dynamic
final items = ['Item 1','Item 2','Item 3','Item 4','Item 5','Item 6','Item 7','Item 8','Item 9',];ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
)
ListView.builder is a special constructor that takes itemCount and based on that it creates widget inside itemBuilder which has access to the current item index.
This simple trick will make ListView infinite…
TIP: Just remove the itemCount parameter. And off you go!
ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
)
If you want to dig deeper, feel free to check out this source.
▰▰▰▰▰ AnimatedListView ▰▰▰▰▰
An AnimatedList is a List that animates the item when inserted or removed.
It looks like this…
AnimatedList(
itemBuilder: (context, index, animation) {
return slideIt(context, index, animation);
},
)
Let’s make it work step by step
Step ➊: Prepare variables
/// Will used to access the Animated list
final GlobalKey<AnimatedListState> listKey = GlobalKey<AnimatedListState>();/// This holds the items
List<int> _items = [];/// This holds the item count
int counter = 0;
Step ➋: Deploy the AnimatedList.
AnimatedList(
key: listKey,
initialItemCount: _items.length,
itemBuilder: (context, index, animation) {
return slideIt(context, index, animation); // Refer step 3
},
)Step ➌: Write a widget to display as Items in a list.
Widget slideIt(BuildContext context, int index, animation) {
int item = _items[index];
TextStyle textStyle = Theme.of(context).textTheme.headline4;
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(-1, 0),
end: Offset(0, 0),
).animate(animation),
child: SizedBox( // Actual widget to display
height: 128.0,
child: Card(
color: Colors.primaries[item % Colors.primaries.length],
child: Center(
child: Text('Item $item', style: textStyle),
),
),
),
);
}Step ➍: Insert the Item.
listKey.currentState.insertItem(0,
duration: const Duration(milliseconds: 500));
_items = []
..add(counter++)
..addAll(_items);For this example, we are adding any new item to the first index.
Step ➎: Remove the Item.
listKey.currentState.removeItem(
0, (_, animation) => slideIt(context, 0, animation),
duration: const Duration(milliseconds: 500));
_items.removeAt(0);▰▰▰▰▰ ListWheelScrollview ▰▰▰▰▰
As you can see in the above GIF, The items in ListWheelScrollview are placed like these numbers on the wheel. It gives the then effect of items are actually rotating on a wheel.
Minimal code looks like this…
ListWheelScrollView(
itemExtent: 75,
children: items,
)now just create items
final items = [
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
ListTile(
title: Text('Item 3'),
),
];And you are done.
▰▰▰▰▰ ReorderableListView ▰▰▰▰▰
It's a ListView which allows us to reorder the items by drag and drop.
ReorderableListView(
children: List.generate(items.length, (index) {
return ListTile(
key: ValueKey("value$index"),
title: Text('Item $index'),
);
}),
onReorder: (int oldIndex, int newIndex) {
setState(() {
_updateMyItems(oldIndex, newIndex);
});
},
)onReorder will be called whenever the user successfully drags and drop the item at the new location.
_updateMyItems is simply swapping the item in the variable which is used to get data like this…
void _updateMyItems(int oldIndex, int newIndex) {
if (newIndex > oldIndex) {
newIndex -= 1;
}
final String item = items.removeAt(oldIndex);
items.insert(newIndex, item);
}
Thanks for reading. If you found this article helpful, probably your friends will too! Go ahead and share it!
