Flutter에서 ReorderableListView를 사용하여 리스트 항목 순서 변경하기

728x90

Flutter의 ReorderableListView 위젯은 리스트 항목의 순서를 드래그 앤 드롭 방식으로 변경할 수 있는 기능을 제공합니다. 사용자가 직접 항목의 순서를 조정할 수 있는 이 위젯은 인터렉티브한 애플리케이션 개발에 매우 유용합니다. 이번 글에서는 ReorderableListView 위젯을 사용하여 리스트 항목의 순서를 변경하는 방법에 대해 살펴보겠습니다.

ReorderableListView란 무엇인가?

ReorderableListView는 Flutter에서 제공하는 기본 리스트뷰 위젯의 확장 기능으로, 사용자가 리스트 항목을 드래그하여 순서를 재배열할 수 있게 도와줍니다. 리스트가 동적인 콘텐츠를 제공할 때 유용하며, 항목의 위치를 사용자 요구에 맞게 변경해야 할 때 특히 활용도가 높습니다.

이 위젯은 다양한 용도로 사용될 수 있으며, 예를 들어 할 일 목록(To-Do List), 즐겨찾기 목록, 사용자가 맞춤 설정할 수 있는 카테고리나 아이템 리스트 등에 활용될 수 있습니다.

ReorderableListView 기본 사용법

Flutter에서 ReorderableListView를 사용하려면 먼저 flutter/material.dart 패키지를 불러오고, ReorderableListView 위젯을 생성하여 필요한 리스트 데이터를 넣어주면 됩니다. 간단한 예제를 통해 기본 사용법을 설명하겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ReorderableListScreen(),
    );
  }
}

class ReorderableListScreen extends StatefulWidget {
  @override
  _ReorderableListScreenState createState() => _ReorderableListScreenState();
}

class _ReorderableListScreenState extends State<ReorderableListScreen> {
  // 초기 리스트 데이터
  final List<String> items = ['사과', '바나나', '오렌지', '포도', '수박'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ReorderableListView Example'),
      ),
      body: ReorderableListView(
        children: [
          for (int index = 0; index < items.length; index++)
            ListTile(
              key: ValueKey(items[index]),
              title: Text(items[index]),
            ),
        ],
        onReorder: (oldIndex, newIndex) {
          setState(() {
            // 리스트 순서를 변경하는 로직
            if (newIndex > oldIndex) {
              newIndex -= 1;
            }
            final String item = items.removeAt(oldIndex);
            items.insert(newIndex, item);
          });
        },
      ),
    );
  }
}

위 예제에서는 ReorderableListView 위젯을 사용하여 리스트 항목을 보여주고, 사용자가 항목을 드래그할 때 onReorder 콜백 함수가 호출됩니다. onReorder 함수는 oldIndex와 newIndex 값을 제공하며, 이 두 값을 이용해 리스트 항목의 순서를 변경할 수 있습니다. 여기서 중요한 점은 리스트 항목의 키 값을 고유하게 설정해야 한다는 것입니다. 이는 key 속성을 이용해 처리할 수 있습니다.

주요 구성 요소

ReorderableListView: 리스트 항목을 드래그 앤 드롭으로 재정렬할 수 있는 위젯입니다.
onReorder: 사용자가 리스트 항목을 드래그할 때 호출되는 콜백 함수입니다. 이 함수 내에서 리스트의 순서를 조정할 수 있습니다.
key: 각 리스트 항목에 고유한 키를 부여하여 Flutter가 항목을 올바르게 인식하도록 합니다.

실제 예시

ReorderableListView는 다양한 애플리케이션에서 활용될 수 있습니다. 예를 들어, 사용자 설정 화면에서 원하는 순서로 위젯을 배치하거나, 할 일 목록에서 우선순위를 변경하는 기능을 구현할 때 매우 유용합니다. 다음은 할 일 목록 앱에서 이 기능을 적용한 예시입니다.

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  List<String> todos = ['아침 운동하기', '코드 작성하기', '독서하기', '친구와 전화'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('할 일 목록'),
      ),
      body: ReorderableListView(
        children: [
          for (int index = 0; index < todos.length; index++)
            ListTile(
              key: ValueKey(todos[index]),
              title: Text(todos[index]),
              trailing: Icon(Icons.drag_handle),
            ),
        ],
        onReorder: (oldIndex, newIndex) {
          setState(() {
            if (newIndex > oldIndex) {
              newIndex -= 1;
            }
            final String item = todos.removeAt(oldIndex);
            todos.insert(newIndex, item);
          });
        },
      ),
    );
  }
}

위 예제에서는 할 일 목록을 ReorderableListView로 구현하여 사용자가 항목을 드래그하여 순서를 변경할 수 있습니다. 이렇게 간단한 코드로도 리스트의 순서를 자유롭게 조정할 수 있습니다.

ReorderableListView 사용할 때 주의할 점

Key 사용: 각 항목에 고유한 key 값을 설정하는 것이 중요합니다. 이를 통해 Flutter는 리스트 항목의 고유성을 식별할 수 있습니다.
애니메이션 효과: Flutter는 드래그 중에 부드러운 애니메이션 효과를 기본적으로 제공합니다. 하지만 필요에 따라 커스텀 애니메이션을 적용할 수 있습니다.
복잡한 리스트: 리스트 항목에 복잡한 위젯을 포함할 경우에도 ReorderableListView는 문제없이 작동하지만, 성능에 영향을 줄 수 있으므로 최적화에 신경 써야 합니다.

결론

Flutter의 ReorderableListView 위젯은 사용자 경험을 높일 수 있는 강력한 도구입니다. 드래그 앤 드롭 방식으로 리스트 항목의 순서를 변경할 수 있는 이 기능은 다양한 애플리케이션에서 사용될 수 있습니다. 위젯의 사용법은 간단하지만, 적절한 구현을 통해 직관적이고 유연한 UI를 제공할 수 있습니다. ReorderableListView를 활용해서 앱을 만들어보세요!