[flutter] 플러터 애니메이션을 사용한 화면 전환 효과 구현 방법

11 Dec 2023

flutter

화면 전환 효과는 모바일 앱의 사용자 경험을 향상시키는 데 중요합니다. 플러터에서는 애니메이션을 사용하여 화면 전환 시 부드럽고 매끄러운 효과를 구현할 수 있습니다. 이번 포스트에서는 플러터를 사용하여 화면 전환 효과를 구현하는 방법에 대해 알아보겠습니다.

1. 애니메이션 라이브러리 가져오기

플러터에서 화면 전환 효과를 구현하기 위해서는 먼저 flutter_animation 또는 flutter_bloc와 같은 애니메이션 관련 라이브러리를 가져와야 합니다.

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

2. 애니메이션 효과 구현

애니메이션 효과를 구현하기 위해 AnimationController 및 Tween 클래스를 사용할 수 있습니다.

class FadeRoute extends PageRouteBuilder {
  final Widget page;

  FadeRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
            opacity: Tween<double>(
              begin: 0,
              end: 1,
            ).animate(
              CurvedAnimation(
                parent: animation,
                curve: Curves.easeIn,
              ),
            ),
            child: child,
          ),
        );
}

3. 애니메이션 효과 적용

실제로 애니메이션 효과를 적용할 때에는 Navigator 클래스를 사용하여 화면을 전환합니다.

Navigator.of(context).push(FadeRoute(page: NewPage()));

위 코드에서 FadeRoute는 애니메이션을 적용한 새로운 화면으로 전환됩니다.

애니메이션을 사용하여 화면 전환 효과를 구현하는 방법에 대해 알아보았습니다. 플러터를 활용하여 앱의 사용자 경험을 향상시키는 멋진 화면 전환 효과를 구현해보세요!

더 많은 정보를 원하시면 플러터 공식 문서를 참고하시기 바랍니다.