cft

4 Types Of ListView In Flutter You Should Know

A short guide briefing types of ListView available in Flutter.


user

Pinkesh Darji

2 years ago | 3 min read

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

First thing first…

▰▰▰▰▰ 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!

Upvote


user
Created by

Pinkesh Darji

I love to solve problems using technology that improves user’s life on a major scale. Over the last several years, I have been developing and leading various mobile apps in different areas. More than just programming, I love to write technical articles. I have written many high-quality technical articles. I have worked with various startups to build their dream app. I have been involved in product development since my early days and know insights into it. I have provided my valuable input while taking some crucial decisions of the app by brainstorming with a design, QA team. For the last 2.5 years, I have been developing mobile apps and libraries using Google’s Flutter framework. I mentor junior Flutter developers and review their code. You will also find me talking on various Flutter topics in local meetups. LinkedIn: https://www.linkedin.com/in/pinkesh-darji-flutter/ Github: https://github.com/pinkeshdarji Twitter: https://twitter.com/PinkeshDarji


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles