[flutter] 플러터에서의 Swipeable 화면 전환 애니메이션 구현 방법

08 Dec 2023

flutter

플러터(Flutter) 앱에서는 swipeable한 화면 전환 애니메이션을 구현하는 것이 사용자 경험을 향상시키는 데 도움이 됩니다. 이번 포스팅에서는 Swipable 위젯을 사용하여 플러터에서 간단한 화면 전환 애니메이션을 구현하는 방법에 대해 알아봅니다.

Swipable 위젯 소개

Swipable 위젯은 사용자의 제스처(gesture)에 응답하여 움직이는 위젯을 만들 수 있도록 도와주는 플러터 라이브러리입니다. 사용자가 화면을 스와이프할 때 화면을 변경하거나 애니메이션을 추가할 수 있습니다.

필요한 패키지 설치

먼저, Swipable 위젯을 사용하기 위해 flutter_swipe 패키지를 설치해야 합니다.

flutter pub add flutter_swipe

Swipeable 화면 전환 애니메이션 구현하기

다음은 flutter_swipe 패키지를 사용하여 swipeable한 화면 전환 애니메이션을 구현하는 간단한 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Swipe(
        child: MyPage(),
        onSwipeLeft: () {
          // 왼쪽으로 스와이프할 때 실행할 액션
          // 다음 화면으로 전환하는 코드 추가
        },
        onSwipeRight: () {
          // 오른쪽으로 스와이프할 때 실행할 액션
          // 이전 화면으로 전환하는 코드 추가
        },
      ),
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipeable 화면 전환'),
      ),
      body: Center(
        child: Text('Swipe하여 화면을 전환하세요.'),
      ),
    );
  }
}

위 예제에서는 flutter_swipe 패키지의 Swipe 위젯을 사용하여 MyPage 위젯을 swipeable하게 만들고, onSwipeLeft와 onSwipeRight 콜백을 통해 좌우로 스와이프할 때의 액션을 정의합니다.

마무리

이제 flutter_swipe 패키지를 사용하여 플러터(Flutter) 앱에서 swipeable한 화면 전환 애니메이션을 구현하는 방법에 대해 알아보았습니다. 이를 통해 사용자가 앱을 더 쉽게 이용할 수 있도록 화면 전환을 더욱 즐겁게 만들 수 있습니다.

더 많은 정보는 flutter_swipe 패키지 문서를 참고하시기 바랍니다.