In this example, I'm going to share the code on how to reorder a listview item.
By using ReorderableListView widget, you can reorder the items inside a ListView.
You need to observe that after dragging and dropping the item. We are calling a method to reorder the actual items in the List.
Here is how the final output is going to look.
![](../../Uploads/6d6f9062-f9c0-41fd-8296-44c329fece32.gifwidth="50%height="auto](
Here is the full code from main.dart file. You can simply copy-paste and run the code to see the output.
color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget {
color: #569cd6;](@override
color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();
}
color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State {
color: #4ec9b0;](double padValue = color: #b5cea8;](0;
color: #4ec9b0;](List paints = [
color: #4ec9b0;](Paint(color: #b5cea8;](1, color: #ce9178;]('Red', color: #4ec9b0;](Colors.red),
color: #4ec9b0;](Paint(color: #b5cea8;](2, color: #ce9178;]('Blue', color: #4ec9b0;](Colors.blue),
color: #4ec9b0;](Paint(color: #b5cea8;](3, color: #ce9178;]('Green', color: #4ec9b0;](Colors.green),
color: #4ec9b0;](Paint(color: #b5cea8;](4, color: #ce9178;]('Lime', color: #4ec9b0;](Colors.lime),
color: #4ec9b0;](Paint(color: #b5cea8;](5, color: #ce9178;]('Indigo', color: #4ec9b0;](Colors.indigo),
color: #4ec9b0;](Paint(color: #b5cea8;](6, color: #ce9178;]('Yellow', color: #4ec9b0;](Colors.yellow)
];
color: #569cd6;](@override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {
color: #c586c0;](return color: #4ec9b0;](MaterialApp(
home: color: #4ec9b0;](Scaffold(
appBar: color: #4ec9b0;](AppBar(
title: color: #4ec9b0;](Text(color: #ce9178;]("ReorderableListView Example"),
),
body: color: #4ec9b0;](ReorderableListView(
children: color: #4ec9b0;](List.color: #dcdcaa;](generate(paints.length, (index) {
color: #c586c0;](return color: #4ec9b0;](ListTile(
key: color: #4ec9b0;](ValueKey(color: #ce9178;]("value$
color: #9cdcfe;](index
color: #ce9178;]("),
leading: color: #4ec9b0;](Container(
width: color: #b5cea8;](100.0,
height: color: #b5cea8;](100.0,
color: paints[index].colorpicture,
),
title: color: #4ec9b0;](Text(color: #ce9178;]('ID: ' + paints[index].id.color: #dcdcaa;](toString()),
subtitle: color: #4ec9b0;](Text(paints[index].title),
);
}),
onReorder: (color: #4ec9b0;](int oldIndex, color: #4ec9b0;](int newIndex) {
color: #dcdcaa;](setState(() {
color: #dcdcaa;](_updateMyItems(oldIndex, newIndex);
});
},
),
),
);
}
color: #569cd6;](void color: #dcdcaa;](_updateMyItems(color: #4ec9b0;](int oldIndex, color: #4ec9b0;](int newIndex) {
color: #c586c0;](if (newIndex > oldIndex) {
newIndex -= color: #b5cea8;](1;
}
color: #569cd6;](final color: #4ec9b0;](Paint item = paints.color: #dcdcaa;](removeAt(oldIndex);
paints.color: #dcdcaa;](insert(newIndex, item);
}
}
color: #569cd6;](class color: #4ec9b0;](Paint {
color: #569cd6;](final color: #4ec9b0;](int id;
color: #569cd6;](final color: #4ec9b0;](String title;
color: #569cd6;](final color: #4ec9b0;](Color colorpicture;
color: #4ec9b0;](Paint(color: #569cd6;](this.id, color: #569cd6;](this.title, color: #569cd6;](this.colorpicture);
}
`
Thanks, Srikanth