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

08 Dec 2023

flutter

Flutter 애플리케이션에서 페이지 간 이동 애니메이션은 사용자 경험을 향상시키는 데 중요합니다. 이번 포스트에서는 Swipeable Widget을 사용하여 페이지 간의 이동 애니메이션을 생성하는 방법에 대해 알아보겠습니다.

Swipeable Widget은 사용자가 스와이프 동작을 사용하여 상호 작용하는 데 사용되는 Flutter 위젯입니다. 이를 통해 사용자가 화면을 스와이프하거나 드래그할 때 일련의 애니메이션과 동작을 제어할 수 있습니다.

아래는 Swipeable Widget을 사용하여 페이지 간의 이동 애니메이션을 구현하는 간단한 예제 코드입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              SwipeablePageRoute(builder: (BuildContext context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Go back'),
        ),
      ),
    );
  }
}

위의 코드에서는 먼저 SwipeablePageRoute 패키지를 import하고, Navigator.of(context).push를 사용하여 다음 페이지로 이동하는 액션에 SwipeablePageRoute를 할당합니다. 이를 통해 Swipeable Widget이 적용된 페이지 간의 이동 애니메이션을 구현할 수 있습니다.

결론

이제 Swipeable Widget을 사용하여 Flutter 애플리케이션에서 페이지 간의 이동 애니메이션을 구현하는 방법에 대해 알아보았습니다. Swipeable Widget을 활용하면 사용자의 스와이프 동작에 반응하여 부드러운 페이지 전환 효과를 제공할 수 있습니다. 페이지 간의 전환 애니메이션을 개선하고 사용자 경험을 향상시킬 때 이러한 기술을 적극적으로 활용해보세요.

더 많은 정보를 원하신다면 SwipeablePageRoute 패키지 공식 문서를 참고하시기 바랍니다.

Swipeable Widget이란?

Swipeable Widget을 사용하여 페이지 이동 애니메이션 구현하기

결론