Flutter: ReorderableListView Widget Tutorial

Flutter: ReorderableListView Widget Tutorial

ReorderableListView is a list of widgets that the user can drag at their own choice and can change their order. This widget is provided by the Flutter framework and no plugin is needed to be installed. This widget is appropriate for a small number of widgets because the reordering is done for each of the children even if not in view hence a CPU-intensive process.


ReorderableListView is itself a widget of type ListView hence the implementation is very similar. It has two required parameters that are:

  • children: This parameter takes the List of children widgets.

  • onReorder(int oldIndex, int newIndex): This callback function has two fields, oldIndex and newIndex of type integer. After that, we can interchange using the widgets on that index.

  children: _items,
  onReorder: (oldIndex, newIndex) {},

Each widget that is the child of ReorderableListView must have a key required for reordering.


In the following example, we have generated a list of widgets and then used a random colour.


class ReorderableListViewTutorial extends StatefulWidget {
  const ReorderableListViewTutorial({Key? key}) : super(key: key);

  _ReorderableListViewTutorialState createState() =>

class _ReorderableListViewTutorialState
    extends State<ReorderableListViewTutorial> {
  final List<ListTile> _items = List<ListTile>.generate(
    (int index) => ListTile(
      key: Key("$index"),
      tileColor: Color(
        (math.Random().nextDouble() * 0xFFFFFF).toInt(),
      title: Text("Item $index"),
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ReorderableListView Tutorial"),
      body: ReorderableListView(
        children: _items,
        onReorder: (oldIndex, newIndex) {
          setState(() {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            final ListTile item = _items.removeAt(oldIndex);
            _items.insert(newIndex, item);


Did you find this article valuable?

Support All About Flutter | Flutter and Dart by becoming a sponsor. Any amount is appreciated!