4 Types Of ListView In Flutter You Should Know

A short guide briefing types of ListView available in Flutter.

Pinkesh Darji
Jul 21 · 4 min read
Image for post
Image for post

Here are the ListViews that we are going to cover.

  • ListView
  • AnimatedListView
  • ListWheelScrollview
  • Reorderable list view

▰▰▰▰▰ ListView ▰▰▰▰▰

This type of ListView is used widely in app development as it offers most of the things.

ListView(
children: <Widget>[
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
ListTile(
title: Text('Item 3'),
),
],
)
Image for post
Image for post

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]),
);
},
)
Image for post
Image for post

This simple trick will make ListView infinite…

ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
)
Image for post
Image for post

▰▰▰▰▰ AnimatedListView ▰▰▰▰▰

An AnimatedList is a List that animates the item when inserted or removed.

AnimatedList(
itemBuilder: (context, index, animation) {
return slideIt(context, index, animation);
},
)
Image for post
Image for post

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;
AnimatedList(
key: listKey,
initialItemCount: _items.length,
itemBuilder: (context, index, animation) {
return slideIt(context, index, animation); // Refer step 3
},
)
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),
),
),
),
);
}
listKey.currentState.insertItem(0,
duration: const Duration(milliseconds: 500));
_items = []
..add(counter++)
..addAll(_items);
listKey.currentState.removeItem(
0, (_, animation) => slideIt(context, 0, animation),
duration: const Duration(milliseconds: 500));
_items.removeAt(0);

▰▰▰▰▰ ListWheelScrollview ▰▰▰▰▰

ListWheelScrollView(
itemExtent: 75,
children: items,
)
final items = [
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
ListTile(
title: Text('Item 3'),
),
];
Image for post
Image for post

▰▰▰▰▰ 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);
});
},
)
void _updateMyItems(int oldIndex, int newIndex) {
if (newIndex > oldIndex) {
newIndex -= 1;
}
final String item = items.removeAt(oldIndex);
items.insert(newIndex, item);

}
Image for post
Image for post

Aubergine Solutions

Among the World’s Top 50 UX Agencies.

Pinkesh Darji

Written by

Passionate Flutter Dev | Google Certified Associate Android Developer | Cross-platform App Dev | Kotlin Android Dev https://twitter.com/PinkeshDarji

Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com

Pinkesh Darji

Written by

Passionate Flutter Dev | Google Certified Associate Android Developer | Cross-platform App Dev | Kotlin Android Dev https://twitter.com/PinkeshDarji

Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store