Photo by Joyce McCown on Unsplash

ListView is basically a list of items. Users can scroll vertically or horizontally to see more items when the list is big enough to not fit on screen.

This article covers the basics of 4 types of ListView in Flutter. I know you have less time so let’s get straight to the points.

Here are the ListViews that we are going to cover.

  • ListView
  • AnimatedListView
  • ListWheelScrollview
  • Reorderable list view

First thing first…

▰▰▰▰▰ ListView ▰▰▰▰▰

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

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 you are done.

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

If you want to dig deeper, Here you go.

▰▰▰▰▰ 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 to be helpful please share it with your friends.

For more about programming, follow me and Aubergine Solutions, so you’ll get notified when we write new posts.

Little about me

Hi, Myself Pinkesh Darji, and I love to solve a real-world problem using Technology that improves user’s life on a major scale.