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

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

Flutter에서는 기본적으로 MaterialPageRoute와 CupertinoPageRoute를 제공하여 화면 전환 애니메이션을 처리할 수 있습니다. 그러나 앱의 디자인에 맞게 사용자 정의 트랜지션(Custom Transition)을 적용하면 더욱 독창적인 UI를 만들 수 있습니다.

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

---

1. Flutter의 기본 페이지 전환

Flutter의 기본 화면 전환 방식은 Navigator.push()를 이용하는 것입니다.

(1) 기본적인 페이지 전환

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

MaterialPageRoute는 Android 스타일의 기본 화면 전환(슬라이드 애니메이션)을 제공합니다. 하지만 앱의 브랜딩에 맞춘 독창적인 트랜지션을 적용하려면 사용자 정의 페이지 전환을 설정해야 합니다.

---

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

Flutter에서는 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()));

설명:

• Offset(1.0, 0.0): 화면 오른쪽에서 왼쪽으로 슬라이드
• CurveTween(curve: Curves.easeInOut): 부드러운 애니메이션 적용
• SlideTransition: 화면 전환 효과 적용

---

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의 사용자 정의 트랜지션을 활용하여 더욱 개성 있는 앱을 개발해 보세요!