[flutter] ListView에서 아이템을 스와이프하여 삭제하기

08 Dec 2023

flutter

Flutter 앱에서 ListView를 사용하여 목록을 표시하고, 사용자가 아이템을 스와이프하여 삭제할 수 있는 기능을 추가하는 방법에 대해 알아보겠습니다.

ListView 구현하기

우선, ListView를 구현하여 목록을 표시합니다. ListView.builder나 ListView.separated 등의 생성자를 사용하여 데이터를 기반으로 아이템들을 빌드합니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
      // 추가적인 위젯들 추가 가능
    );
  },
)

Dismissible 위젯 추가하기

ListView 아이템을 스와이프하여 삭제하기 위해 Dismissible 위젯을 추가합니다. Dismissible는 주어진 키를 사용하여 아이템을 스와이프할 때 일어나는 행동을 지정할 수 있습니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: Key(items[index]),
      onDismissed: (direction) {
        setState(() {
          items.removeAt(index);
        });
      },
      background: Container(
        color: Colors.red,
        alignment: Alignment.centerRight,
        padding: EdgeInsets.symmetric(horizontal: 20.0),
        child: Icon(Icons.delete, color: Colors.white),
      ),
      child: ListTile(
        title: Text(items[index]),
        // 추가적인 위젯들 추가 가능
      ),
    );
  },
)

요약

ListView에서 아이템을 스와이프하여 삭제하기 위해 Dismissible 위젯을 사용하여 아이템을 스와이프할 때의 동작을 정의할 수 있습니다. 위의 예제를 참고하여 앱에 ListView를 구현하고, 사용자가 목록에서 아이템을 스와이프하여 삭제할 수 있는 기능을 추가해보세요.

이상으로 Flutter에서 ListView에서 아이템을 스와이프하여 삭제하는 방법에 대해 알아보았습니다.

참고 자료: