[flutter] ListView에서 아이템을 스와이프하여 상세 정보 표시하기

08 Dec 2023

flutter

ListView는 Flutter 앱에서 여러 아이템을 나열하여 보여주는데 사용되는 효과적인 위젯입니다. 만약 사용자가 ListView의 특정 아이템을 스와이프하여 상세 정보를 표시하고 싶다면, 이를 위한 몇 가지 방법이 있습니다. 여기에는 Dismissible 위젯, GestureDetector, 혹은 다른 터치 제스처 처리 방법이 있습니다.

Dismissible 위젯 사용하기

Dismissible 위젯은 ListView 아이템을 swipe하여 삭제 또는 수정하는 등의 동작을 수행하는 데 사용됩니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return Dismissible(
      key: Key(items[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(items[index].title),
        onTap: () {
          // 아이템을 탭했을 때 상세 정보 표시
          _showItemDetails(items[index]);
        },
      ),
    );
  },
)

위 예제에서 Dismissible 위젯은 ListTile을 감싸 ListView에 표시되는 각 아이템에 스와이프 기능을 추가합니다. 또한, ListTile의 onTap 속성을 이용하여 아이템을 탭했을 때 상세 정보를 표시하는 함수를 호출할 수 있습니다.

GestureDetector 사용하기

또 다른 방법은 GestureDetector를 사용하여 ListView의 아이템을 스와이프할 수 있게 하는 것입니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return GestureDetector(
      onHorizontalDragEnd: (details) {
        // swipe 동작을 처리
        if (details.primaryVelocity < 0) {
          // swipe left
        } else if (details.primaryVelocity > 0) {
          // swipe right
          _showItemDetails(items[index]);
        }
      },
      child: ListTile(
        title: Text(items[index].title),
      ),
    );
  },
)

이 예제에서는 GestureDetector를 이용하여 ListView 아이템을 수평으로 스와이프했을 때 상세 정보를 표시하는 함수를 호출합니다.

이러한 방법들을 사용하여 ListView의 아이템을 스와이프하여 상세 정보를 표시할 수 있습니다.

Dismissible 위젯 사용하기

GestureDetector 사용하기

참고 자료