[flutter] ListView에서 아이템을 롱 클릭하여 추가 작업 수행하기

08 Dec 2023

flutter

Flutter 앱을 개발하는 경우, ListView에서 아이템을 롱 클릭하여 추가 작업을 수행해야 하는 경우가 있습니다. 이를 위해서는 GestureDetector 위젯과 ContextMenu를 활용하여 손쉽게 구현할 수 있습니다.

GestureDetector를 사용하여 롱 클릭 처리하기

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return GestureDetector(
      onLongPress: () {
        // 롱 클릭 시 수행할 작업 추가
      },
      child: ListTile(
        title: Text(items[index]),
      ),
    );
  },
)

위의 예제에서는 ListView의 각 아이템에 GestureDetector를 추가하여, 아이템을 롱 클릭했을 때 수행할 작업을 정의할 수 있습니다.

ContextMenu를 활용하여 추가 작업 수행하기

return GestureDetector(
  onLongPress: () {
    showMenu(
      context: context,
      position: RelativeRect.fromLTRB(details.globalPosition.dx, details.globalPosition.dy, 0, 0),
      items: <PopupMenuEntry>[
        PopupMenuItem(
          child: Text('추가 작업 1'),
          value: 'action1',
        ),
        PopupMenuItem(
          child: Text('추가 작업 2'),
          value: 'action2',
        ),
      ],
    ).then((value) {
      if (value == 'action1') {
        // 추가 작업 1 수행
      } else if (value == 'action2') {
        // 추가 작업 2 수행
      }
    });
  },
  child: ListTile(
    title: Text(items[index]),
  ),
);

위의 예제에서는 ContextMenu를 활용하여 ListView 아이템을 롱 클릭했을 때, 특정 작업을 선택할 수 있는 메뉴를 표시하고, 선택된 작업에 따라 추가 작업을 수행할 수 있습니다.

위와 같이 GestureDetector와 ContextMenu를 활용하여 ListView에서 아이템을 롱 클릭하여 추가 작업을 손쉽게 수행할 수 있습니다.

본 내용은 Flutter 공식 문서를 참고하여 작성되었습니다.