[flutter] 플러터 Swipeable을 이용한 카드 슬라이더 구현 방법

08 Dec 2023

flutter

플러터(Flutter)를 사용하여 카드 슬라이더를 구현하려면 Swipeable을 활용할 수 있습니다. Swipeable은 사용자의 제스처에 반응하여 슬라이드를 구현할 수 있도록 도와줍니다. 이번 블로그에서는 Swipeable을 이용하여 카드 슬라이더를 구현하는 방법에 대해 알아보겠습니다.

Swipeable 라이브러리 추가

먼저, pubspec.yaml 파일에 Swipeable 라이브러리를 추가해야 합니다. 아래와 같이 dependencies에 Swipeable 라이브러리를 추가합니다.

dependencies:
  swipeable: ^3.0.0

그리고 터미널에서 flutter pub get 명령어를 입력하여 라이브러리를 다운로드 받습니다.

카드 슬라이더 구현

아래는 Swipeable을 이용하여 간단한 카드 슬라이더를 구현하는 예제입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CardSlider(),
    );
  }
}

class CardSlider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipeable Card Slider'),
      ),
      body: Center(
        child: Swipeable(
          onSwipeLeft: () {
            // 왼쪽으로 스와이프했을 때의 동작 처리
          },
          onSwipeRight: () {
            // 오른쪽으로 스와이프했을 때의 동작 처리
          },
          child: Container(
            width: 300,
            height: 200,
            color: Colors.blue,
            child: Text('Swipe left or right'),
          ),
        ),
      ),
    );
  }
}

위 코드에서 Swipeable 위젯으로 감싼 Container는 사용자의 제스처에 반응하여 왼쪽 또는 오른쪽으로 슬라이드할 수 있습니다.

위 코드를 실행하면 Swipeable을 이용한 간단한 카드 슬라이더를 확인할 수 있습니다.

Swipeable을 이용하여 플러터 앱에 카드 슬라이더를 구현하는 방법에 대해 알아보았습니다. Swipeable을 이용하면 간편하게 사용자의 제스처에 반응하는 기능을 구현할 수 있습니다. 이를 통해 사용자 경험을 향상시키는 플러터 앱을 만들 수 있습니다.