[flutter] Swipeable Widget을 사용하여 페이지 전환 애니메이션 구현하기

08 Dec 2023

flutter

Flutter 앱에서 페이지 전환에 애니메이션을 적용하려면 Swipeable Widget을 사용하여 터치 제스처를 감지하고 페이지를 스와이프하는 동작에 따라 전환 애니메이션을 추가할 수 있습니다. 이번 포스트에서는 Swipeable Widget을 사용하여 페이지 전환 애니메이션을 구현하는 방법에 대해 소개하겠습니다.

먼저 flutter_swipeable 패키지를 사용하여 Swipeable Widget을 추가합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter_swipeable: ^1.0.0

다음으로, 패키지를 가져온 후 해당 Widget을 사용하여 페이지 전환 애니메이션을 적용할 수 있습니다.

2. 페이지 전환 애니메이션 구현

다음은 Swipeable Widget을 사용하여 페이지 전환 애니메이션을 구현하는 예제 코드입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Swipeable(
        onSwipeLeft: () {
          // 왼쪽으로 스와이프할 때의 처리
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => NextPage(),
            ),
          );
        },
        onSwipeRight: () {
          // 오른쪽으로 스와이프할 때의 처리
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => PrevPage(),
            ),
          );
        },
        child: YourCurrentPage(),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  // 다음 페이지 위젯
  // ...
}

class PrevPage extends StatelessWidget {
  // 이전 페이지 위젯
  // ...
}

class YourCurrentPage extends StatelessWidget {
  // 현재 페이지 위젯
  // ...
}

위 예제 코드에서는 Swipeable Widget을 사용하여 좌우로 스와이프할 때 각각 다음 페이지와 이전 페이지로 전환하는 애니메이션을 추가한 것을 확인할 수 있습니다.

이제 Swipeable Widget을 사용하여 페이지 전환 애니메이션을 구현하는 방법을 알아보았습니다. 이를 사용하여 사용자 경험을 향상시키는 멋진 페이지 전환 애니메이션을 구현해보세요!

간단한 설치 및 구현하는 것이기에 더 많은 부분을 명확히 파악하기 위해서는 공식 문서를 참고하시면 좋을 것 같습니다.

참고 자료

flutter_swipeable 패키지 공식 문서

이상으로 Swipeable Widget을 사용하여 페이지 전환 애니메이션을 구현하는 방법에 대해 알아보았습니다. 부가적인 문서들을 확인하여 원하는 기능을 자유자재로 구현할 수 있도록 노력해보세요!

1. Swipeable Widget 추가

2. 페이지 전환 애니메이션 구현

참고 자료