Flutter reorderablelistview drag handle

by

Flutter ReorderableListView Drag Handle

The ReorderableListView widget in Flutter does not provide a built-in drag handle for reordering items. However, we can implement a drag handle using the LongPressDraggable widget along with some additional logic.

Step 1: Create a List of Items

First, let’s create a list of items that we want to reorder. For example, let’s say we have a list of colors: 


List<String> colors = [
  'Red',
  'Green',
  'Blue',
  'Yellow',
  'Orange',
];

Step 2: Create a ReorderableListView

Next, we need to wrap our list of items with a ReorderableListView widget: 


ReorderableListView(
  children: List.generate(
    colors.length,
    (index) {
      return ListTile(
        key: Key('$index'), // Each list item must have a unique key
        title: Text(colors[index]),
        trailing: Icon(Icons.drag_handle), // Drag handle icon
      );
    },
  ),
  onReorder: (oldIndex, newIndex) {
    // Callback when an item is reordered
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final color = colors.removeAt(oldIndex);
      colors.insert(newIndex, color);
    });
  },
)

In the above code, we use the List.generate() method to generate a list of ListTile widgets for each color. Each ListTile has a unique key and a drag handle icon using the trailing property.

We also provide an onReorder callback that is triggered whenever an item is reordered. Inside the callback, we update the order of colors in the list accordingly using the removeAt() and insert() methods.

Step 3: Wrap with LongPressDraggable

To enable dragging of each color item, we need to wrap each ListTile widget with a LongPressDraggable widget: 


ReorderableListView(
  children: List.generate(
    colors.length,
    (index) {
      return LongPressDraggable(
        key: Key('$index'), // Each draggable item must have a unique key
        index: index,
        child: ListTile(
          key: Key('$index'),
          title: Text(colors[index]),
          trailing: Icon(Icons.drag_handle),
        ),
        feedback: ListTile(
          title: Text(colors[index]),
          trailing: Icon(Icons.drag_handle),
          // Styling for the dragged item
          tileColor: Colors.grey,
          textColor: Colors.white,
        ),
      );
    },
  ),
  // onReorder callback remains the same
  onReorder: (oldIndex, newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final color = colors.removeAt(oldIndex);
      colors.insert(newIndex, color);
    });
  },
)

Now, each color item is draggable. We provide the key and index properties to the LongPressDraggable widget. The feedback property is used to provide a visual representation of the dragged item while it is being moved.

That’s it! Now you have a ReorderableListView with drag handles for reordering items. Feel free to customize the drag handle icon and the styling of the dragged item as per your requirements.

Leave a comment