How do I make a ReorderableListView ListTile draggable on button/icon press for Flutter?

Question

So I saw the ReorderableListView demo and saw that they had the

"secondary: const Icon(Icons.drag_handle)"

but looking at the reorderable_list.dart file, I noticed that the entire list was draggable on LongPressDraggable anyway [line 424]. So how can I explicitly make changes to either the source code or my own, in order to properly make the icon an actual drag handle?

CheckboxListTile(
      key: Key(item.value),
      isThreeLine: true,
      value: item.checkState ?? false,
      onChanged: (bool newValue) {
        setState(() {
          item.checkState = newValue;
        });
      },
      title: Text('This item represents ${item.value}.'),
      subtitle: secondary,
      secondary: const Icon(Icons.drag_handle),  // Make this Icon drag source
    );

Thanks

Solution 1

I think the Icon(Icons.drag_handle) it's just for the looks there, to drag the item in a ReorderableListView you have to long press it.

You can use flutter_reorderable_list and achieve that. As you can see in its demo, this plugin works just the way you want to.

However, it works quite differently of ReorderableListView, the code change can be a bit overwhelming. I created a Widget to simplify that switch, the widget is here and its demo is here.

Take a look and use it if it fits your use case.

Solution 2

2021/05/29

As an update of the answer, there's already a customizable handler for the ReorderableListView:

With the recent refactoring of the ReorderableListView (PRs: #74299 and #74697), we have added automatic drag handles when running on the desktop (with a buildDefaultDragHandles property to turn it off). If this isn't what you want, you can add your own drag handle as a widget to each of your items with something like:

ReorderableDragStartListener(
  index: index,
  child: const Icon(Icons.drag_handle),
),

You can check the details here: https://github.com/flutter/flutter/issues/46805