[flutter] Swipeable Widget을 이용한 화면 이동 애니메이션 구현하기

08 Dec 2023

flutter

이 기술 블로그에서는 Flutter에서 Swipeable Widget을 활용하여 화면 이동 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. 시작하기

먼저, 새로운 Flutter 프로젝트를 생성하고 환경을 설정합니다. IDE 또는 터미널을 통해 필요한 패키지를 설치합니다.

flutter create swipeable_animation
cd swipeable_animation

이제 flutter_swipe_action 패키지를 사용하여 Swipeable Widget을 추가합니다. pubspec.yaml 파일에 해당 패키지를 추가한 후, 패키지를 설치합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_swipe_action: ^2.0.0

터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

3. 화면 이동 애니메이션 구현하기

실제로 Swipeable Widget을 사용하여 화면 이동 애니메이션을 구현해 봅시다. main.dart 파일을 수정하여 Swipeable Widget을 추가하고, 화면 이동 애니메이션을 설정합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SwipeAction(
        child: Container(
          color: Colors.blue,
          child: Center(
            child: Text(
              'Swipe Left or Right',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        ),
        onSwipeRight: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SecondScreen()),
          );
        },
        onSwipeLeft: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => ThirdScreen()),
          );
        },
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('This is the second screen'),
      ),
    );
  }
}

class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Screen'),
      ),
      body: Center(
        child: Text('This is the third screen'),
      ),
    );
  }
}

위 코드에서, SwipeAction 위젯을 추가하고 onSwipeRight 및 onSwipeLeft 콜백을 통해 애니메이션 및 화면 전환 로직을 구현합니다.

4. 마무리

이제 프로젝트를 실행하여 Swipeable Widget을 이용한 화면 이동 애니메이션을 확인할 수 있습니다. Swipeable Widget을 활용하면 사용자 친화적이고 멋진 화면 전환 효과를 구현할 수 있습니다.

이상으로 Swipeable Widget을 이용한 화면 이동 애니메이션 구현에 대해 알아보았습니다. 더 많은 정보를 원하시거나 궁금한 점이 있으시면 flutter_swipe_action 패키지 문서를 참고해 주세요.

감사합니다.

목차

1. 시작하기

2. Swipeable Widget 추가하기

3. 화면 이동 애니메이션 구현하기

4. 마무리