[flutter] Swipeable Widget을 사용하여 카드 슬라이더 구현하기

08 Dec 2023

flutter

이번에는 Flutter 앱에서 Swipeable Widget을 사용하여 카드 슬라이더를 구현하는 방법에 대해 알아보겠습니다. Swipeable Widget을 사용하면 사용자가 제스처로 카드를 스와이프하여 다수의 카드를 보여주는 기능을 구현할 수 있습니다.

Swipeable Widget은 사용자 인터페이스에서 제스처를 사용하여 상호 작용하는 데 사용되는 위젯입니다. 이를 사용하면 사용자가 스와이프, 드래그 또는 슬라이드 동작을 통해 여러 동작을 수행할 수 있게 됩니다.

카드 슬라이더 만들기

먼저, Swipeable Widget 패키지를 Flutter 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter_swipeable: ^1.0.0

이제 Swipeable Widget을 사용하여 카드 슬라이더를 만들어봅시다.

import 'package:flutter/material.dart';
import 'package:flutter_swipeable/flutter_swipeable.dart';

class SwipeableCardSlider extends StatefulWidget {
  @override
  _SwipeableCardSliderState createState() => _SwipeableCardSliderState();
}

class _SwipeableCardSliderState extends State<SwipeableCardSlider> {
  List<String> _cards = [
    'Card 1',
    'Card 2',
    'Card 3',
    // Add more cards as needed
  ];

  @override
  Widget build(BuildContext context) {
    return Swipeable(
      threshold: 0.2,
      onLeftSwipe: () {
        // Handle left swipe
      },
      onRightSwipe: () {
        // Handle right swipe
      },
      child: Container(
        height: 200,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: _cards.length,
          itemBuilder: (context, index) {
            return Card(
              child: Center(
                child: Text(_cards[index]),
              ),
            );
          },
        ),
      ),
    );
  }
}

여기서 Swipeable 위젯을 사용하여 카드 슬라이더를 구현합니다. threshold 속성은 스와이프로 인식되기 위한 최소 비율을 나타내며, onLeftSwipe 및 onRightSwipe 콜백을 사용하여 왼쪽 및 오른쪽 스와이프 제스처에 대한 처리를 정의할 수 있습니다.

이제 SwipeableCardSlider 위젯을 원하는 곳에 배치하여 카드 슬라이더를 화면에 표시할 수 있습니다.

카드 슬라이더를 만드는 방법에 대해 간단히 살펴보았습니다. Swipeable Widget을 사용하여 사용자 친화적이고 인터랙티브한 앱을 만들 수 있습니다. 더 많은 기능을 추가하여 사용자 경험을 향상시킬 수 있습니다.

Swipeable Widget이란?

카드 슬라이더 만들기