[flutter] Swipeable Widget을 활용한 쇼핑 앱 UI 구현하기

08 Dec 2023

flutter

이번 포스트에서는 Flutter의 Swipeable Widget을 활용하여 멋진 쇼핑 앱 UI를 구현하는 방법에 대해 알아보겠습니다.

Swipeable Widget은 사용자가 좌우로 스와이프하여 항목을 삭제하거나 다양한 액션을 수행할 수 있는 대화형 위젯입니다. 이를 활용하면 쇼핑 앱에서 제품을 스와이프하여 삭제하거나 관심 상품에 추가하는 등의 기능을 구현할 수 있습니다.

먼저, flutter_swipe_action_cell 패키지를 프로젝트에 추가합니다. 이 패키지를 사용하면 Swipeable 기능을 갖춘 셀을 간편하게 구현할 수 있습니다.

dependencies:
  flutter_swipe_action_cell: ^1.2.0

위와 같이 pubspec.yaml 파일에 패키지를 추가한 후, flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

다음으로, Swipeable을 적용할 리스트나 그리드 아이템을 구성하고, 각 항목에 Swipeable Widget을 추가합니다.

SwipeActionCell(
  key: ObjectKey(item),
  performsFirstActionWithFullSwipe: true,
  trailingActions: <SwipeAction>[
    SwipeAction(
      title: "삭제",
      onTap: () {
        // 항목 삭제 로직
      },
      color: Colors.red,
    ),
    SwipeAction(
      title: "관심 상품에 추가",
      onTap: () {
        // 관심 상품 추가 로직
      },
      color: Colors.blue,
    ),
  ],
  child: ListTile(
    title: Text(item.title),
    subtitle: Text(item.subtitle),
    leading: CircleAvatar(
      backgroundImage: NetworkImage(item.imageUrl),
    ),
  ),
);

위와 같이 각 항목에 SwipeActionCell을 추가하여 좌우 스와이프 동작에 따른 액션을 정의할 수 있습니다.

3. 쇼핑 앱 UI에 적용하기

이제 Swipeable Widget을 사용하여 실제 쇼핑 앱 UI에 적용해보겠습니다. 제품 리스트나 관심 상품 목록 등에 Swipeable Widget을 적용하여 사용자가 간편하게 항목을 관리할 수 있는 UI를 구현할 수 있습니다.

이렇게하면 사용자가 제품을 삭제하거나 관심 상품에 추가하는 등의 작업을 더 편리하게 수행할 수 있습니다.

마무리

Flutter의 Swipeable Widget을 활용하여 쇼핑 앱 UI를 구현하는 방법에 대해 알아보았습니다. Swipeable을 활용하면 사용자가 쉽게 항목을 관리할 수 있는 직관적이고 효율적인 UI를 구성할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 더 편리한 앱을 제공할 수 있습니다.

1. Swipeable Widget 소개

2. Swipeable Widget 사용하기

3. 쇼핑 앱 UI에 적용하기

마무리