[flutter] ListView에서 아이템을 스와이프하여 완료 상태 변경하기

08 Dec 2023

flutter

안녕하세요! Flutter에서 ListView를 사용하여 아이템을 스와이프하여 완료 상태를 변경하는 방법에 대해 알아보겠습니다.

ListView 및 Dismissible 위젯

Flutter에서 ListView는 스크롤 가능한 목록을 표시하는 데 사용됩니다. 그리고 Dismissible 위젯은 사용자가 항목을 스와이프하여 완전히 삭제하거나 다른 작업을 수행할 수 있게 해줍니다.

ListView.builder(
  itemCount: _list.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: Key(_list[index].id),
      onDismissed: (direction) {
        // 아이템 삭제 또는 완료 상태 변경 로직 작성
      },
      background: Container(
        color: Colors.red,
        child: Icon(Icons.delete),
        alignment: Alignment.centerRight,
        padding: EdgeInsets.only(right: 20.0),
      ),
      child: ListTile(
        title: Text(_list[index].title),
        // 나머지 아이템 UI 작성
      ),
    );
  },
)

위의 예제 코드에서 ListView.builder를 사용하여 ListView를 생성하고, Dismissible 위젯을 아이템에 적용하여 스와이프할 수 있는 기능을 추가했습니다.

완료 상태 변경 로직 추가하기

Dismissible 위젯의 onDismissed 콜백에서 아이템의 완료 상태를 변경하는 로직을 추가할 수 있습니다.

onDismissed: (direction) {
  setState(() {
    _list[index].isCompleted = true; // 아이템의 완료 상태 변경
  });
},

위의 코드에서는 onDismissed 콜백 내부에서 해당 아이템의 완료 상태를 변경하는 예시를 보여줍니다.

마치며

이제 ListView에서 아이템을 스와이프하여 완료 상태를 변경하는 방법에 대해 알아보았습니다. Dismissible 위젯을 사용하면 ListView 항목을 스와이프하여 사용자 상호작용을 향상시키는 데 도움이 됩니다.

자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.