Building a Top Ten List: Using ReorderableListView to Reorder List Items
Tags: flutter
Published: 2020-04-27 15:32:58

---
title: Building a Top Ten List: Using ReorderableListView to Reorder List Items
published: true
date: 2020-04-17 07:27:05 UTC
tags: flutter
canonical_url: 
---

 ![Building a Top Ten List: Using ReorderableListView to Reorder List Items](https://developer.school/content/images/2020/04/top_ten.png)

In this article we'll be looking at how to use `ReorderableListView` to reorder list items inside of our Flutter applications. The `ReorderableListView` is part of the `Material` library and should be used for smaller list(s) without a substantial amount of items.

The `ReorderableListView` doesn't support the use of a `builder` method as it uses a `SingleChildScrollView` under the hood. As a result, you could see performance issue(s) with larger lists - keep this in mind!

### Video

Prefer to watch a video? Here's one I recorded for this article:

<iframe width="480" height="270" src="https://www.youtube.com/embed/8dASZ7inkLk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### Project Setup

The project we'll be creating is a simple "Top 10" list where the user can rank a list of items. Here's an example of it in action:

<iframe width="459" height="344" src="https://www.youtube.com/embed/BUxca5SsI1Q?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><figcaption>Reorderables!</figcaption>

We'll start by creating a new Flutter project in the terminal:

```
# New Flutter project
$ flutter create fl_reorderable

# Open in editor
$ cd fl_reorderable && code .
```

### Creating our Top Ten List

Firstly, we'll start off by creating a new `Stateful Widget` named `TopTenList` at `lib/top_ten_list.dart`:

```
import 'package:flutter/material.dart';

class TopTenList extends StatefulWidget {
  @override
  _TopTenListState createState() => _TopTenListState();
}

class _TopTenListState extends State<TopTenList> {
  List<String> topTenGames = [
    "World of Warcraft",
    "Final Fantasy VII",
    "Animal Crossing",
    "Diablo II",
    "Overwatch",
    "Valorant",
    "Minecraft",
    "Dota 2",
    "Half Life 3",
    "Grand Theft Auto: Vice City"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Top Ten"),
      ),
      body: ReorderableListView(
        onReorder: (int oldIndex, int newIndex) {},
        children: getListItems(),
      ),
    );
  }

  List<ListTile> getListItems() => topTenGames
      .asMap()
      .map((i, item) => MapEntry(i, buildTenableListTile(item, i)))
      .values
      .toList();

  ListTile buildTenableListTile(String item, int index) {
    return ListTile(
      key: ValueKey(item),
      title: Text(item),
      leading: Text("#${index + 1}"),
    );
  }
}
```

We've established a `List<String>` which contains our `topTenGames` (i.e. the data we'll be using to generate our `_reorderableListItems`). This'll likely be a more complex model on your end, but a `String` should suffice for our demo.

Go ahead and add the `TopTenList` Widget to your `main.dart` file:

```
import 'package:fl_reorderable/top_ten_list.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ReorderableListView',
      theme: ThemeData(
        brightness: Brightness.dark,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      debugShowCheckedModeBanner: false,
      home: TopTenList(),
    );
  }
}

```

### Reordering Items

You'll be able to initiate the reorder functionality on our `TopTenList` by holding down (long press tapping) an item within the list. If you attempt to move this either above or below, it won't work and will snap back to its original position.

This is because we haven't implemented the `onReorder` function. Let's do exactly that!

Add the `onReorder` function below and update the `ReorderableListView` to use this:

```
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Top Ten"),
    ),
    body: ReorderableListView(
      onReorder: onReorder,
      children: getListItems(),
    ),
  );
}

void onReorder(int oldIndex, int newIndex) {
  if (newIndex > oldIndex) {
    newIndex -= 1;
  }

  setState(() {
    String game = topTenGames[oldIndex];

    topTenGames.removeAt(oldIndex);
    topTenGames.insert(newIndex, game);
  });
}
```

This now allows us to directly compare the state of the list depending on whether the user ordered it above _or_ below the current item.  

Why does this matter?

> Note that if [oldIndex] is before [newIndex], removing the item at [oldIndex] from the list will reduce the list's length by one.   
>   
> Implementations used by [ReorderableListView] will need to account for this when inserting before [newIndex].

[https://chromium.googlesource.com/external/github.com/flutter/flutter/+/v0.8.7/packages/flutter/lib/src/material/reorderable\_list.dart](https://chromium.googlesource.com/external/github.com/flutter/flutter/+/v0.8.7/packages/flutter/lib/src/material/reorderable_list.dart)

We're then able to remove the item at the `oldIndex` and replace this with the `newIndex`, and as we're using `setState` we're able to trigger a rebuild of the UI. This'll call our `getListItems()` once more, rendering our new list and surrounding rankings.

### Summary

This completes our Top Ten List! We've now got a list that we're able to reorder _and_ display the current ranking. Some possible improvements to this could be:

1. Give the user an option to create multiple lists with items _per_ list
2. Allow users to add, remove and edit items in the list
3. [Persist list items](https://dev.to/paulhalliday/how-to-save-data-to-localstorage-and-sharedpreferences-in-flutter-6el-temp-slug-79980) to `localstorage` or `shared_preferences`

What would you like to see next? I'd love to hear your feedback at [https://twitter.com/paulhalliday\_io](https://twitter.com/paulhalliday_io)!

Code for this article: [https://github.com/PaulHalliday/flutter\_top\_ten\_list](https://github.com/PaulHalliday/flutter_top_ten_list)