Flutter 페이지 전환 애니메이션 쉽게 이해하기: PageRouteBuilder 활용법

Flutter에서 페이지 전환 애니메이션은 사용자 경험을 향상시키는 중요한 요소 중 하나입니다. 기본적으로 Material 디자인을 따르는 페이지 전환을 제공하지만, 때로는 더 독창적인 애니메이션을 적용하여 앱의 개성을 살리고 싶을 때가 있습니다. 이때 Flutter의 PageRouteBuilder를 활용하면 자신만의 맞춤형 페이지 전환 애니메이션을 쉽게 구현할 수 있습니다.

 

이번 포스트에서는 PageRouteBuilder를 이용한 Flutter 페이지 전환 애니메이션 구현 방법을 차근차근 알아보겠습니다. 특히, 애니메이션 효과를 더 자연스럽게 만드는 Tween과 CurveTween을 어떻게 사용할 수 있는지 구체적으로 설명하겠습니다.

PageRouteBuilder 설정하기

Flutter에서 기본적으로 제공하는 페이지 전환 대신 맞춤형 애니메이션을 사용하고자 할 때는 PageRouteBuilder를 사용해야 합니다. PageRouteBuilder는 두 가지 주요 콜백을 필요로 합니다:

• pageBuilder: 새로운 페이지의 콘텐츠를 정의하는 콜백
• transitionsBuilder: 페이지 전환 애니메이션을 정의하는 콜백

예를 들어, 첫 번째 페이지에서 버튼을 누르면 두 번째 페이지로 이동하는 애니메이션을 적용하는 간단한 코드를 구현할 수 있습니다. 아래 코드는 두 페이지 간의 전환을 정의하는 간단한 예시입니다.

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}

이 기본 코드는 페이지 전환 시 애니메이션이 적용되지 않은 상태입니다. 이제 Tween을 추가하여 페이지 전환에 애니메이션을 적용해보겠습니다.

Tween을 사용해 애니메이션 추가하기

Flutter에서 Tween은 애니메이션의 시작과 끝 값을 정의하는데 사용됩니다. 이번에는 새 페이지가 화면 아래에서 위로 올라오는 애니메이션을 추가해보겠습니다. 이때 페이지의 시작 위치는 Offset(0, 1)이며, 최종 위치는 Offset.zero입니다.

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  const begin = Offset(0.0, 1.0);
  const end = Offset.zero;
  final tween = Tween(begin: begin, end: end);
  final offsetAnimation = animation.drive(tween);
  return SlideTransition(
    position: offsetAnimation,
    child: child,
  );
},

이 코드를 통해 페이지가 아래에서 위로 슬라이드되며 전환되는 애니메이션이 적용됩니다.

CurveTween으로 애니메이션에 곡선 추가하기

CurveTween을 사용하면 애니메이션이 더 자연스러워집니다. 예를 들어, 애니메이션이 빠르게 시작하고 천천히 끝나는 Curves.easeOut을 적용할 수 있습니다. 이때 CurveTween을 사용하여 애니메이션의 속도를 조절합니다.

var curve = Curves.easeOut;
var curveTween = CurveTween(curve: curve);

이 CurveTween을 기존의 Tween과 결합하여, 페이지 전환이 더욱 부드럽고 자연스럽게 이루어지도록 만들 수 있습니다.

Tween과 CurveTween 결합하기

마지막으로, Tween과 CurveTween을 결합하여 애니메이션을 최적화합니다. 이렇게 결합된 애니메이션은 chain() 메서드를 사용하여 애니메이션의 순서를 지정하고, 이를 SlideTransition 위젯에서 활용할 수 있습니다.

const begin = Offset(0.0, 1.0);
const end = Offset.zero;
const curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

return SlideTransition(
  position: animation.drive(tween),
  child: child,
);

이 코드는 두 애니메이션을 결합하여 페이지 전환 효과를 더욱 정교하게 만듭니다.

결론: Flutter 페이지 전환 애니메이션의 효과적인 구현

Flutter에서 페이지 전환 애니메이션을 구현하는 것은 생각보다 간단하며, PageRouteBuilder와 Tween 및 CurveTween을 결합하여 더욱 독창적인 전환 효과를 적용할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 앱의 개성을 부각시킬 수 있습니다.

 

Flutter에서 페이지 전환 애니메이션을 자유롭게 다루고 싶다면, 기본적인 PageRouteBuilder 설정에서부터 다양한 Tween 및 Curve를 사용한 커스텀 애니메이션까지 마스터하는 것이 중요합니다.

 

https://docs.flutter.dev/cookbook/animation/page-route-animation

Animate a page route transition

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Page1(),
    ),
  );
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
          child: const Text('Go!'),
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(0.0, 1.0);
      const end = Offset.zero;
      const curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}