Flutter의 페이지 전환 애니메이션(Page Transition Animation) 사용법

Flutter에서 페이지 전환 애니메이션은 사용자 경험을 향상시키는 중요한 요소입니다. 기본적인 전환 애니메이션 외에도, Flutter는 개발자가 커스텀 전환 애니메이션을 쉽게 구현할 수 있는 다양한 도구를 제공합니다. 이번 글에서는 Flutter에서 페이지 전환 애니메이션을 구현하는 방법과 이를 커스터마이징하는 예제를 자세히 살펴보겠습니다.

1. 기본 페이지 전환 애니메이션

Flutter의 기본 페이지 전환 애니메이션은 Navigator 위젯을 사용하여 구현됩니다. Navigator.push와 Navigator.pop 메서드를 사용하여 페이지를 전환할 수 있습니다.

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('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (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.pop(context);
          },
          child: Text('Back to First Page'),
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 페이지 전환 애니메이션을 구현한 예제입니다. MaterialPageRoute를 사용하여 첫 번째 페이지에서 두 번째 페이지로 전환합니다.

2. 커스텀 페이지 전환 애니메이션

Flutter에서 커스텀 페이지 전환 애니메이션을 구현하려면 PageRouteBuilder를 사용할 수 있습니다. 이를 통해 다양한 전환 효과를 쉽게 추가할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class CustomTransitionFirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) => CustomTransitionSecondPage(),
                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));
                  var offsetAnimation = animation.drive(tween);

                  return SlideTransition(
                    position: offsetAnimation,
                    child: child,
                  );
                },
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

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

 

위 코드는 PageRouteBuilder를 사용하여 커스텀 슬라이드 전환 애니메이션을 구현한 예제입니다. transitionsBuilder를 사용하여 전환 애니메이션을 정의합니다.

 

 

728x90

 

 

3. 페이드 전환 애니메이션

페이드 전환 애니메이션을 구현하려면 FadeTransition을 사용할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class FadeTransitionFirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) => FadeTransitionSecondPage(),
                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                  return FadeTransition(
                    opacity: animation,
                    child: child,
                  );
                },
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

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

 

위 코드는 FadeTransition을 사용하여 페이지 전환 시 페이드 애니메이션을 구현한 예제입니다. opacity 속성에 animation을 전달하여 애니메이션을 적용합니다.

 

반응형

 

 

4. 회전 전환 애니메이션

회전 전환 애니메이션을 구현하려면 RotationTransition을 사용할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class RotationTransitionFirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) => RotationTransitionSecondPage(),
                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                  return RotationTransition(
                    turns: animation,
                    child: child,
                  );
                },
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

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

 

위 코드는 RotationTransition을 사용하여 페이지 전환 시 회전 애니메이션을 구현한 예제입니다. turns 속성에 animation을 전달하여 애니메이션을 적용합니다.

5. 복합 전환 애니메이션

여러 애니메이션을 조합하여 복합 전환 애니메이션을 구현할 수 있습니다. 예를 들어, 슬라이드와 페이드 애니메이션을 결합할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class CompositeTransitionFirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) => CompositeTransitionSecondPage(),
                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));
                  var offsetAnimation = animation.drive(tween);

                  return SlideTransition(
                    position: offsetAnimation,
                    child: FadeTransition(
                      opacity: animation,
                      child: child,
                    ),
                  );
                },
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

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

 

위 코드는 슬라이드와 페이드 애니메이션을 결합하여 페이지 전환을 구현한 예제입니다. SlideTransition과 FadeTransition을 함께 사용하여 애니메이션을 적용합니다.

결론

Flutter에서 페이지 전환 애니메이션을 사용하면 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다. 기본적인 전환 애니메이션부터 커스텀 애니메이션, 복합 애니메이션까지 다양한 방법을 통해 페이지 전환을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 매끄럽고 다양한 페이지 전환 애니메이션을 구현해보세요. 애니메이션을 통해 애플리케이션의 인터페이스를 더욱 매력적으로 만들 수 있습니다.