ReorderableListView - Reorder ListView Items using Drag and Drop in Flutter

<p>In this example, I'm going to share the code on how to reorder a listview item.</p> <p>By using ReorderableListView widget, you can reorder the items inside a ListView.</p> <p>You need to observe that after dragging and dropping the item. We are calling a method to reorder the actual items in the List.</p> <p>Here is how the final output is going to look.</p> <p>![](../../Uploads/6d6f9062-f9c0-41fd-8296-44c329fece32.gifwidth="50%height="auto](</p> <p>Here is the full code from main.dart file. You can simply copy-paste and run the code to see the output.</p> <p>color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());</p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override</p> <p>color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState(); }</p> <p>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</p> <p>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); } }</p> <p>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</p>