Flutter ReorderableListView : Making order in a disorder !

Ouzani Abd Raouf
2 min readSep 28, 2020

The ListView widget is one of the most used widgets in Flutter. Its main function is to scroll through a list of items. But you can’t move items around within the list out of the box.

Fortunately, there’s ReorderableListView. With this widget, users can long press on an item, move it around in the ListView scroll direction, and drop it at a new location.

ReorderableListView(
header: ,
children: ,
onReorder: (int oldIndex, int newIndex) {

},
),

ReorderableListView takes a list of child widgets. You can use almost any kind of widgets, but in most cases ListTile will do the job. Then there is the onReorder callback which is invoked when the user reorders the list. You can use it to update the list of items (widgets) that make up the ReorderableListView. Each child widget must have a unique key so the ReorderableListView can identify it.

You can, optionally, add a non-reorderable header widget to show before the list.

Here is the code of our example :

Note that if oldIndex (the old position) is before newIndex (the new position), removing the item at oldIndex from the list will reduce the list’s length by one. So you will need to account for this in your implementation (newIndex -= 1).

Flutter docs states that this class is appropriate for views with a small number of children because constructing the list requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible.

That’s all fo now. You may also want to read about :

--

--