[flutter] Swipeable Widget을 사용하여 화면 전환 구현하기

08 Dec 2023

flutter

Flutter 앱에서 화면 전환을 구현하는 방법은 여러 가지가 있지만, Swipeable Widget을 사용하여 좌우 스와이프 동작으로 화면 전환을 구현하는 방법이 매우 일반적입니다. Swipeable Widget은 사용자의 입력에 반응하여 화면을 스와이프하는 기능을 제공합니다.

이번 포스트에서는 Swipeable Widget을 사용하여 간단한 화면 전환을 구현하는 방법에 대해 살펴보겠습니다.

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

dependencies:
  flutter_swipeable: ^1.0.0

그리고 터미널에서 다음 명령으로 패키지를 설치합니다:

flutter pub get

다음으로, Swipeable Widget을 사용하여 화면 전환을 구현해보겠습니다. 먼저, Swipeable 위젯을 화면에 추가하고 onSwipe 콜백을 설정하여 스와이프 동작을 처리할 수 있습니다.

다음은 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: () {
          // 왼쪽으로 스와이프할 때의 처리 로직
        },
        onSwipeRight: () {
          // 오른쪽으로 스와이프할 때의 처리 로직
        },
        child: Container(
          color: Colors.blue,
          child: Center(
            child: Text(
              'Swipe me!',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 onSwipeLeft와 onSwipeRight 콜백에서 각각 왼쪽과 오른쪽으로의 스와이프 동작에 대한 처리 로직을 구현할 수 있습니다.

마무리

이제 Swipeable Widget을 사용하여 화면 전환을 구현하는 방법에 대해 알아보았습니다. Swipeable Widget을 이용하면 사용자 친화적인 화면 전환을 쉽게 구현할 수 있으며, 상세한 동작 및 사용 방법은 공식 문서를 참고하시기 바랍니다.

이상으로 Swipeable Widget을 사용한 화면 전환 구현에 대한 내용을 마치도록 하겠습니다. 감사합니다.

Swipeable Widget 설치하기

Swipeable Widget 사용하기

마무리