Flutter 앱을 개발할 때 ListView는 자주 사용되는 위젯 중 하나입니다. ListView를 사용하면 여러 개의 아이템을 화면에 표시하고 스크롤할 수 있습니다. 이때, 사용자가 ListView에서 아이템을 스와이프하여 이동하고 싶을 때가 있습니다. 예를 들어, 할 일 목록 앱을 만들 때 각 항목을 드래그하여 순서를 변경하고 싶은 경우가 있습니다.

이번에는 Flutter에서 ListView에서 아이템을 스와이프하여 이동하는 방법에 대해 알아보겠습니다.

ReorderableListView 사용하기

Flutter에서는 ReorderableListView를 사용하여 ListView의 아이템을 재배치할 수 있습니다. ReorderableListView는 아이템의 순서를 변경하고자 할 때 사용됩니다.

다음은 ReorderableListView를 사용하여 ListView의 아이템을 스와이프하여 이동하는 예시 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reorderable ListView'),
        ),
        body: ReorderableListView(
          children: <Widget>[
            for (int i = 0; i < 10; i++)
              ListTile(
                key: ValueKey(i),
                title: Text('Item ${i + 1}'),
              ),
          ],
          onReorder: (int oldIndex, int newIndex) {
            // 아이템의 순서가 변경되었을 때 처리하는 로직을 작성합니다.
          },
        ),
      ),
    );
  }
}

위 코드에서 ReorderableListView를 사용하여 10개의 ListTile을 보여주고 있습니다. 사용자가 아이템을 드래그하여 순서를 변경하면 onReorder 콜백이 실행됩니다. 여기에 아이템의 순서가 변경되었을 때의 로직을 작성하면 됩니다.

참고 자료

• Flutter ReorderableListView class

Flutter에서 ListView의 아이템을 스와이프하여 이동하는 방법에 대해 알아보았습니다. ReorderableListView를 사용하여 간단히 구현할 수 있으며, 아이템의 순서를 변경할 때마다 발생하는 콜백을 활용하여 원하는 동작을 구현할 수 있습니다.