4 Types Of ListView In Flutter You Should Know

A short guide briefing types of ListView available in Flutter.

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!

Mobile App Development

Upvote

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