[flutter] ListView에서 아이템을 드래그하여 정렬하기

Flutter 앱에서 ListView를 사용하여 리스트를 표시하고 사용자에게 아이템을 드래그하여 재정렬할 수 있는 기능을 제공하고 싶다면, 다음과 같은 방법을 사용할 수 있습니다.

1. ReorderableListView 위젯 사용

Flutter에서는 ReorderableListView 위젯을 사용하여 사용자가 리스트 아이템을 드래그하여 정렬할 수 있는 기능을 제공할 수 있습니다. ReorderableListView는 ReorderableListItemBuilder를 통해 아이템의 순서를 제어합니다.

ReorderableListView(
  children: _items.map((Item item) => ListTile(
    key: Key(item.id),
    title: Text(item.title),
    // ...
  )).toList(),
  onReorder: (int oldIndex, int newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final Item item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  },
)

위 예제에서 ReorderableListView의 children에는 ListTile들이 포함되어 있고, onReorder 콜백을 사용하여 아이템의 순서를 업데이트합니다.

2. Draggable 및 DragTarget 위젯 사용

다른 방법으로는 Draggable과 DragTarget 위젯을 사용하여 사용자가 아이템을 드래그하여 순서를 정렬할 수 있습니다. Draggable 위젯은 리스트 아이템을 드래그할 수 있도록 만들고, DragTarget 위젯은 아이템을 놓을 위치를 지정합니다.

List<Item> _items = // ...;

Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: _items.length,
    itemBuilder: (context, index) {
      return LongPressDraggable(
        data: index,
        child: ListTile(
          title: Text(_items[index].title),
        ),
        feedback: ListTile(
          title: Text(_items[index].title),
        ),
        childWhenDragging: Container(),
      );
    },
  );
}

위 코드는 ListView.builder를 사용하여 리스트 아이템을 표시하고, 각 아이템을 LongPressDraggable 위젯으로 만들어 사용자가 드래그할 수 있도록 합니다.

결론

Flutter에서 ListView를 사용하여 아이템을 드래그하여 정렬하는 방법은 ReorderableListView나 Draggable, DragTarget과 같은 위젯을 활용하는 것이 효과적입니다. 각 방법마다 장단점이 있으니 프로젝트의 요구사항에 맞게 적합한 방법을 선택하면 됩니다.

더 많은 정보는 Flutter 공식 문서를 참고하시기 바랍니다.