[flutter] 플러터 애니메이션을 통한 화면 전환의 부드러움 구현 방법

11 Dec 2023

flutter

플러터(Flutter)로 앱을 개발하다 보면, 화면 전환 시 부드러운 애니메이션을 적용하여 사용자 경험(UX)을 향상시킬 수 있습니다. 이번 포스트에서는 플러터 애니메이션을 사용하여 화면 전환의 부드러움을 구현하는 방법에 대해 알아보겠습니다.

1. 애니메이션 클래스 활용

플러터에서는 다양한 애니메이션 클래스를 제공합니다. 예를 들어, AnimatedContainer, AnimatedOpacity, AnimatedPositioned 등의 클래스를 사용하여 화면 요소들의 애니메이션을 쉽게 적용할 수 있습니다. 이러한 애니메이션 클래스를 활용하여 화면 전환 동안 요소들의 애니메이션을 설정할 수 있습니다.

import 'package:flutter/material.dart';

class AnimatedScreenTransition extends StatefulWidget {
  @override
  _AnimatedScreenTransitionState createState() => _AnimatedScreenTransitionState();
}

class _AnimatedScreenTransitionState extends State<AnimatedScreenTransition> {
  bool _isVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('애니메이션 화면 전환'),
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: _isVisible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isVisible = !_isVisible;
          });
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

위 코드에서는 AnimatedOpacity 클래스를 사용하여 특정 컨테이너의 투명도를 제어하고, FloatingActionButton을 통해 애니메이션 상태를 변경하고 있습니다.

2. 페이지 라우팅과 커스텀 트랜지션

화면 전환의 애니메이션 효과를 커스터마이즈하려면, 페이지 라우팅 및 커스텀 트랜지션을 사용할 수 있습니다. PageRouteBuilder 클래스를 활용하여 페이지 전환 시 커스텀 애니메이션을 적용할 수 있습니다.

import 'package:flutter/material.dart';

class CustomPageTransition extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('커스텀 페이지 전환 애니메이션'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.of(context).push(
              PageRouteBuilder(
                transitionDuration: Duration(milliseconds: 500),
                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                  var begin = Offset(1.0, 0.0);
                  var end = Offset.zero;
                  var curve = Curves.ease;

                  var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
                  var offsetAnimation = animation.drive(tween);
                  return SlideTransition(
                    position: offsetAnimation,
                    child: child,
                  );
                },
                pageBuilder: (context, animation, secondaryAnimation) {
                  return SecondScreen();
                },
              ),
            );
          },
          child: Text('애니메이션 화면 전환'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 화면'),
      ),
      body: Center(
        child: Text('두 번째 화면'),
      ),
    );
  }
}

위 코드에서는 PageRouteBuilder를 사용하여 커스텀 페이지 전환 애니메이션을 적용하고 있습니다. transitionsBuilder 함수를 통해 원하는 애니메이션 효과를 설정하고, pageBuilder 함수를 통해 새로운 화면을 정의하고 있습니다.

애니메이션을 활용하여 플러터 앱의 화면 전환을 부드럽게 구현할 수 있습니다. 다양한 애니메이션 효과와 페이지 전환 기술을 활용하여 사용자에게 뛰어난 앱 경험을 제공할 수 있습니다.

참고 문서: Flutter 애니메이션