[flutter] ListView에서 아이템을 스와이프하여 삭제/편집 기능 추가하기

08 Dec 2023

flutter

Flutter 앱에서 ListView를 사용하여 유동적인 아이템 목록을 표시하고, 사용자가 아이템을 스와이프하여 삭제 또는 편집할 수 있는 기능을 추가하려면, 다음 단계를 따르면 됩니다.

1. Dismissible 위젯 사용하기

아이템을 스와이프하여 삭제 또는 편집하기 위해 Dismissible 위젯을 사용합니다. Dismissible 위젯은 스와이프 동작을 감지하고 해당 동작에 대한 사용자 정의 콜백을 실행할 수 있는 기능을 제공합니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: Key(items[index].id),
      onDismissed: (direction) {
        // 아이템 삭제 또는 편집 처리
      },
      background: Container(
        color: Colors.red,
        child: Icon(Icons.delete),
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.symmetric(horizontal: 20.0),
      ),
      secondaryBackground: Container(
        color: Colors.blue,
        child: Icon(Icons.edit),
        alignment: Alignment.centerRight,
        padding: EdgeInsets.symmetric(horizontal: 20.0),
      ),
      child: ListTile(
        title: Text(items[index].title),
      ),
    );
  },
)

2. 아이템 삭제 또는 편집 처리

Dismissible 위젯의 onDismissed 콜백에서 아이템을 삭제하거나 편집하는 코드를 작성합니다. 이때, 해당 아이템을 목록에서 제거하거나 편집하는 논리를 구현합니다.

onDismissed: (direction) {
  setState(() {
    if (direction == DismissDirection.startToEnd) {
      // 아이템 삭제 처리
      items.removeAt(index);
    } else if (direction == DismissDirection.endToStart) {
      // 아이템 편집 처리
      // (예: 다이얼로그 표시 또는 해당 아이템을 편집하는 화면으로 이동)
    }
  });
},

위 코드는 Dismissible 위젯의 스와이프 방향에 따라 아이템을 삭제하거나 편집하는 예시입니다.

이렇게 ListView에 Dismissible 위젯을 추가하여, 아이템을 스와이프하여 삭제 또는 편집하는 기능을 손쉽게 구현할 수 있습니다.

위 내용은 Flutter 공식 문서 Dismissing items from a list에서 참고하였습니다.