[flutter] Swipeable Widget을 이용한 터치 이벤트 처리 방법

08 Dec 2023

flutter

Flutter 앱에서 스와이프 동작에 대한 터치 이벤트를 처리하기 위해 Swipeable Widget을 사용할 수 있습니다. Swipeable Widget은 사용자가 요소를 좌우로 밀거나 스와이프하는 제스처를 감지하여 적절한 동작을 수행할 수 있게 해줍니다. 이 포스트에서는 Swipeable Widget의 기본 사용 방법과 터치 이벤트 처리 방법에 대해 설명하겠습니다.

Swipeable Widget은 Flutter의 flutter_slidable 패키지를 통해 제공됩니다. 이를 사용하기 위해서는 먼저 flutter_slidable 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter_slidable: ^0.6.0

그리고 나서 pub get 명령을 통해 패키지를 다운로드 받습니다.

이제 Swipeable Widget을 사용할 화면의 코드에서 해당 위젯을 import하고, Swipeable Widget을 구성하고자 하는 요소 주변에 해당 위젯을 배치하면 됩니다.

Swipeable Widget은 사용자의 스와이프 동작을 감지하고, 이에 따라 요소의 상태를 변경하거나 사용자 정의 동작을 수행할 수 있게 해줍니다. Swipeable Widget에 대한 터치 이벤트를 처리하기 위해 다음과 같은 단계를 따를 수 있습니다.

onWillDelete 콜백 등록: Swipeable Widget에 사용자가 삭제 동작을 요청했을 때 호출될 콜백 함수를 등록합니다. 이 콜백 함수에서는 요소의 삭제 동작을 처리하거나 다른 동작을 수행할 수 있습니다.
actions 또는 secondaryActions 설정: Swipeable Widget 내부에 표시될 버튼들을 actions 또는 secondaryActions에 추가하여 사용자가 스와이프할 때 나타날 동작들을 정의합니다.

아래는 Swipeable Widget을 사용하여 터치 이벤트를 처리하는 간단한 예시 코드입니다.

Swipeable(
  onWillDelete: () {
    // 삭제 동작 처리
  },
  actions: <Widget>[
    IconSlideAction(
      caption: 'Archive',
      color: Colors.blue,
      icon: Icons.archive,
      onTap: () => _archiveItem(),
    ),
    IconSlideAction(
      caption: 'Share',
      color: Colors.indigo,
      icon: Icons.share,
      onTap: () => _shareItem(),
    ),
  ],
  child: ListTile(
    title: Text('Swipe me'),
  ),
)

위 코드에서는 onWillDelete 콜백에 삭제 동작을 처리하는 함수를 등록하고, actions에는 Swipeable Widget이 스와이프되었을 때 나타날 버튼들을 정의하고 해당 버튼이 눌렸을 때 수행될 동작을 설정하였습니다.

Swipeable Widget을 이용하여 터치 이벤트를 처리함으로써 사용자가 스와이프 동작을 통해 요소를 쉽게 조작할 수 있게 됩니다.

이렇게하여 스와이프 동작에 대한 터치 이벤트를 Swipeable Widget을 이용하여 처리하는 방법에 대해 알아보았습니다. Flutter 앱에서 사용자 친화적인 스와이프 기능을 구현할 때 Swipeable Widget은 유용한 도구가 될 것입니다.

참고 자료:

Flutter Slidable 패키지 - https://pub.dev/packages/flutter_slidable

Swipeable Widget 기본 사용 방법

Swipeable Widget 터치 이벤트 처리 방법