Flutter의 사용자 정의 트랜지션(Custom Transition) 구현 방법

Flutter의 사용자 정의 트랜지션(Custom Transition) 구현 방법

Flutter에서 화면 전환 시 기본적으로 MaterialPageRoute 또는 CupertinoPageRoute를 사용하지만, 사용자 정의 트랜지션(Custom Transition)을 적용하면 더욱 창의적이고 개성 있는 화면 전환 효과를 만들 수 있습니다.

이 글에서는 Flutter에서 사용자 정의 트랜지션을 구현하는 방법을 설명하고, 다양한 애니메이션 효과를 적용하는 방법을 소개하겠습니다.

---

1. Flutter의 기본 화면 전환 방식

Flutter의 기본 화면 전환은 Navigator.push()를 사용하여 이루어집니다.

(1) 기본 페이지 전환

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

이 방식은 기본적인 슬라이드 애니메이션을 제공하지만, 맞춤형 애니메이션이 필요할 경우 PageRouteBuilder를 활용하여 사용자 정의 트랜지션을 만들 수 있습니다.

---

2. 사용자 정의 트랜지션 적용

사용자 정의 트랜지션을 구현하려면 PageRouteBuilder를 사용하여 원하는 애니메이션 효과를 적용할 수 있습니다.

(1) 기본적인 페이드(Fade) 애니메이션 적용

import 'package:flutter/material.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("Fade Transition Example")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(context, _fadeRoute(SecondPage()));
          },
          child: Text("페이드 전환"),
        ),
      ),
    );
  }
}

PageRouteBuilder _fadeRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  );
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Page")),
      body: Center(child: Text("페이드 애니메이션 적용됨")),
    );
  }
}

설명:

• PageRouteBuilder를 사용하여 사용자 정의 전환 효과 적용
• FadeTransition을 활용하여 부드러운 페이드 효과 제공
• 재사용 가능한 _fadeRoute() 함수를 정의하여 다른 페이지에서도 적용 가능

---

3. 슬라이드(Slide) 애니메이션 적용

슬라이드 애니메이션을 적용하면 화면이 특정 방향으로 이동하며 전환됩니다.

(1) 슬라이드 애니메이션 구현

PageRouteBuilder _slideRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var curve = Curves.easeInOut;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

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

(2) 적용 예제

Navigator.push(context, _slideRoute(SecondPage()));

설명:

• SlideTransition을 사용하여 화면이 오른쪽에서 왼쪽으로 슬라이드되도록 설정
• Offset(1.0, 0.0)을 이용해 초기 위치를 오른쪽으로 설정
• CurveTween을 적용하여 자연스러운 이동 효과 추가

---

4. 크기 변경(Scale) 애니메이션 적용

크기 변화 애니메이션을 사용하면 페이지가 확대되면서 나타나는 효과를 줄 수 있습니다.

(1) 크기 애니메이션 구현

PageRouteBuilder _scaleRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return ScaleTransition(
        scale: animation,
        child: child,
      );
    },
  );
}

(2) 적용 예제

Navigator.push(context, _scaleRoute(SecondPage()));

설명:

• ScaleTransition을 사용하여 화면이 확대되면서 나타나는 효과 적용
• animation 값을 활용하여 크기를 부드럽게 변화

---

5. 회전(Rotation) 애니메이션 적용

화면이 회전하면서 전환되는 애니메이션을 적용할 수도 있습니다.

(1) 회전 애니메이션 구현

PageRouteBuilder _rotateRoute(Widget page) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return RotationTransition(
        turns: animation,
        child: child,
      );
    },
  );
}

(2) 적용 예제

Navigator.push(context, _rotateRoute(SecondPage()));

설명:

• RotationTransition을 사용하여 회전 효과 적용
• animation을 활용하여 부드러운 회전 구현

---

결론

Flutter에서 사용자 정의 트랜지션을 적용하면 앱의 화면 전환을 더욱 부드럽고 직관적으로 만들 수 있습니다.

• Fade Transition: 부드러운 페이드 효과
• Slide Transition: 화면 슬라이드 전환
• Scale Transition: 확대/축소 애니메이션
• Rotation Transition: 회전 효과

이제 Flutter의 사용자 정의 트랜지션을 활용하여 더욱 개성 있는 앱을 개발해 보세요!