Reorderable ListView In Flutter
By: Shaiq Khan
Tags: Reorderable List View, Flutter Widget, Flutter, Mobile App Development, Dart

This class is fitting for sees with few numbers of the children’s fact that developing the List requires accomplishing work for each child that might be shown in the list view see rather than merely those children that are noticeable.

Code Implementation

Create a new dart file called reorderable_view_page.dart inside the lib folder.

First, we will create a list in which we have the data. So, we will create a list of string and let me give it a name called item and after giving the name item. I will create an array; basically, it is a list, not an array.

List<String> item = ["Clients","Designer","Developer","Director",

"Employee", "Manager", "Worker","Owner"];

Note that all children of the ReorderableListView widget must have a key since the key is expected to distinguish items after their position is changed in the List. This is the means by which your ReorderableListView widget resembles.

ReorderableListView(

children: <Widget>[

for(final items in widget.item)

Card(

color: Colors.blueGrey,

key: ValueKey(items),

elevation: 2,

child: ListTile(

title: Text(items),

leading: Icon(Icons.work,color: Colors.black,),

),

),

],

onReorder: reorderData, ),

In ReorderableListView, we will add a card, and in the card, we will add key and List Tile. In List Tile, we will add a title and leading icon. On Reorder parameter is compulsory. It will be called when the list child is moved to a new position.

Let we will create a rorder function and give it a name called reorderData.

void reorderData(int oldindex, int newindex){

setState(() {

if(newindex>oldindex){

newindex-=1;

}

final items =widget.item.removeAt(oldindex);

widget.item.insert(newindex, items);

});

}

This function will add two parameters, first old index and the second one is the new index. In this function, we will add final items is equal to item dot remove at the old index place. Then, when the item is excluded from that index placed, it should be inserted the point where you want to index that is it should be inserted at the new index place. So, item dot inserts (new index, items) and then run the code, and the output will be shown on your devices. We have to write the logic in the setState() method to reflect the changes.

Now we add an icon on the app bar for sorting purposes. It will rearrange your list is increasing to decreasing the alphabet.

actions: <Widget>[

IconButton(icon: Icon(Icons.sort_by_alpha),

tooltip:"Sort",

onPressed: sorting

),

],

Let we will create a sorting function.

void sorting(){

setState(() {

widget.item.sort();

});

}

In this function, we will add item dot short for rearranging the data.

We will tap on the AZ icon then all data will be rearranged due to the sort method. On this screen, you will see a list and icon on a card.

Code File

You will see a full code on a GitHub, and this is a small demo example of ReorderableListView in a flutter, and this below video shows how ReorderableListView will work and how to drag and drop the item.

Conclusion:

In the article, I have explained the basic demo of ReorderableListView you can modify this code according to your choice, and this was a small basic introduction of ReorderableListView from my side and its working using Flutter.

I hope this blog will provide you with sufficient information in Trying up Reorderable ListView in Flutter in your flutter projects. This is a demo example that will integrate ReorderableListView in a flutter and show dragging and dropping the items, and also used a sort method for rearranging the items in a list on the increase to decrease way, So please try it.

❤ ❤ Thanks for reading this article ❤❤