Reorderable ListView In Flutter
Flutter is notable for its similarity among other mobile development stages that why it is one of the most promptly developing stages, and the primary purpose for it is the Flutter has thought of each feature and functionality which is required to build up a completely fledged application.
In this article, I will explore Reorderable ListView in Flutter and how to reorder a listview thing. By utilizing the ReorderableListView widget, you can rearrange the item inside a ListView in your flutter applications. You have to see that in the wake of moving and dropping the item.
Table Of Contents:
Reorderable ListView
The reorderable List is one whose items are draggable, and the user can rearrange/modify the object.
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 ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Reorderable ListView Demo:
flutter-devs/flutter_reorderable_listview_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
