이번 포스트에서는 Flutter 앱에서 Swipeable Widget을 사용하여 페이지 슬라이더를 구현하는 방법을 살펴보겠습니다.

Swipeable Widget

Swipeable Widget은 사용자의 손가락 동작에 반응하여 화면을 스와이프할 수 있도록 하는 Flutter 라이브러리입니다. 이를 사용하면 간단한 코드로 페이지 슬라이더를 만들 수 있습니다.

기본적인 사용법

먼저, flutter_swipeable 패키지를 프로젝트에 추가해야 합니다. 이후에는 다음과 같이 기본적인 Swipeable Widget을 사용할 수 있습니다.

import 'package:flutter_swipeable/flutter_swipeable.dart';

Swipeable(
  onSwipeLeft: () {},
  onSwipeRight: () {},
  child: Container(
    width: double.infinity,
    height: 200,
    color: Colors.blue,
    child: Center(
      child: Text('Swipe me'),
    ),
  ),
)

위 코드에서는 Swipeable 위젯을 사용하여 좌우 스와이프 동작에 반응하는 컨텐츠를 만들었습니다. onSwipeLeft와 onSwipeRight 콜백 함수를 통해 각각의 스와이프 동작에 대한 처리를 정의할 수 있습니다.

페이지 슬라이더로 응용하기

위의 기본적인 사용법을 바탕으로, 여러 개의 컨텐츠를 순차적으로 스와이프하여 페이지를 전환하는 슬라이더를 구현할 수 있습니다. 이때는 현재 화면에 보이는 컨텐츠의 변경을 관리하는 상태를 추가로 사용해야 합니다.

int currentIndex = 0;

List<Widget> pages = [
  Container(color: Colors.red),
  Container(color: Colors.green),
  Container(color: Colors.blue),
];

Swipeable(
  onSwipeLeft: () {
    setState(() {
      if (currentIndex < pages.length - 1) {
        currentIndex++;
      }
    });
  },
  onSwipeRight: () {
    setState(() {
      if (currentIndex > 0) {
        currentIndex--;
      }
    });
  },
  child: pages[currentIndex],
)

위 코드에서는 currentIndex를 사용하여 현재 보이는 페이지를 관리하고, onSwipeLeft와 onSwipeRight 콜백 함수에서는 이 값을 변경함으로써 페이지 전환 기능을 구현했습니다.

이러한 방법으로 flutter_swipeable 패키지를 사용하여 간단하게 페이지 슬라이더를 구현할 수 있습니다.

마치며

이번 포스트에서는 Flutter에서 Swipeable Widget을 이용하여 페이지 슬라이더를 만드는 방법에 대해 알아보았습니다. Swipeable Widget을 사용하면 사용자 친화적이고 직관적인 인터랙션을 구현할 수 있으며, 앱의 사용자 경험을 향상시킬 수 있습니다.

더 많은 자료와 예제는 flutter_swipeable GitHub 페이지에서 확인할 수 있습니다.

언제나 Flutter와 관련된 최신 소식을 확인하려면 Flutter 공식 홈페이지를 방문해보세요!