Flutter의 커스텀 트랜지션(Custom Transitions) 만들기

Flutter는 기본 페이지 전환 애니메이션을 제공하지만, 사용자 경험을 향상시키기 위해 커스텀 트랜지션을 직접 구현할 수도 있습니다. 커스텀 트랜지션을 통해 앱의 개성을 더하고, 보다 매끄럽고 독특한 전환 효과를 구현할 수 있습니다. 이번 글에서는 Flutter에서 커스텀 트랜지션을 만드는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. 기본 페이지 전환

기본적으로 Flutter에서 페이지 전환은 Navigator를 사용하여 이루어집니다. Navigator.push와 Navigator.pop을 통해 새로운 페이지로 이동하거나 이전 페이지로 돌아갈 수 있습니다. 기본 페이지 전환 애니메이션은 MaterialPageRoute로 설정됩니다.

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'),
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 페이지 전환 예제입니다. 이제 커스텀 트랜지션을 적용해보겠습니다.

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