SharedAxisTransition, PageTransitionSwitcher

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

class SharedAxisScreen extends StatefulWidget {
  const SharedAxisScreen({super.key});

  @override
  State<SharedAxisScreen> createState() => _SharedAxisScreenState();
}

class _SharedAxisScreenState extends State<SharedAxisScreen> {
  int _currentImage = 1; // 현재 보여줄 이미지 번호

  // 새 이미지로 전환하는 함수
  void _goToImage(int newImage) {
    setState(() {
      _currentImage = newImage; // 새 이미지 번호로 상태 업데이트
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shared Axis'), // 앱 바 제목
      ),
      body: Column(
        children: [
          PageTransitionSwitcher(
            duration: const Duration(milliseconds: 500), // 전환 애니메이션 지속 시간
            transitionBuilder: (child, primaryAnimation, secondaryAnimation) =>
                SharedAxisTransition(
              animation: primaryAnimation,
              secondaryAnimation: secondaryAnimation,
              transitionType: SharedAxisTransitionType.scaled, // 스케일 전환 타입
              child: child,
            ),
            child: Container(
              key: ValueKey(_currentImage), // 이미지 변경 감지를 위한 키
              clipBehavior: Clip.hardEdge,
              decoration: const BoxDecoration(
                shape: BoxShape.circle, // 원형 이미지
              ),
              child: Image.asset("assets/covers/$_currentImage.jpg"), // 이미지
            ),
          ),
          const SizedBox(
            height: 50, // 이미지와 버튼 사이의 공간
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 이미지 변경을 위한 버튼들
              for (var btn in [1, 2, 3, 4, 5])
                ElevatedButton(
                    onPressed: () => _goToImage(btn), // 버튼 클릭 시 이미지 변경
                    child: Text("$btn")),
            ],
          )
        ],
      ),
    );
  }
}

Flutter에서 SharedAxisScreen 클래스는 애니메이션 전환 효과를 보여주는 예제입니다. 이 예제는 PageTransitionSwitcher, SharedAxisTransition, 그리고 ValueKey를 사용하여 이미지 간의 부드러운 전환을 구현합니다. 아래에서 각 요소의 역할과 작동 방식을 설명합니다.

1. PageTransitionSwitcher

PageTransitionSwitcher는 자식 위젯 간의 전환을 처리하는 데 사용됩니다. 이 위젯은 한 자식 위젯에서 다른 자식 위젯으로 전환할 때 애니메이션 효과를 제공합니다. 여기서 중요한 점은 PageTransitionSwitcher가 두 개의 자식 위젯을 동시에 관리할 수 있다는 것입니다: 하나는 화면에 나타나는 자식이고, 다른 하나는 사라지는 자식입니다.

2. SharedAxisTransition

SharedAxisTransition은 animations 패키지의 일부로, 공유 축을 중심으로 하는 전환 애니메이션을 구현합니다. 이 전환은 SharedAxisTransitionType에 따라 다르게 작동하며, 여기서는 .scaled 타입이 사용됩니다. 이 타입은 자식 위젯이 확대 또는 축소되는 효과와 함께 나타나거나 사라지게 합니다.

3. ValueKey

ValueKey는 Flutter에서 위젯의 고유성을 식별하는 데 사용됩니다. PageTransitionSwitcher 내부에서 자식 위젯을 전환할 때, Flutter는 어떤 위젯이 새로운 것이고 어떤 위젯이 이전 것인지를 구분해야 합니다. 이 과정에서 ValueKey가 중요한 역할을 합니다. 여기서 _currentImage 값을 키로 사용함으로써, 각 이미지 컨테이너의 고유성을 보장하고, 적절한 애니메이션 효과를 적용할 수 있습니다.

로직의 흐름

1. 사용자는 하단의 숫자 버튼 중 하나를 클릭합니다.
2. _goToImage 함수가 호출되고, 선택된 이미지 번호가 _currentImage로 설정됩니다.
3. setState가 호출되면서 PageTransitionSwitcher 내의 child가 업데이트됩니다. 새로운 child는 새로운 _currentImage 값에 해당하는 이미지를 가지고 있으며, ValueKey를 통해 고유하게 식별됩니다.
4. PageTransitionSwitcher는 SharedAxisTransition을 사용하여 이전 자식과 새 자식 사이의 전환 애니메이션을 수행합니다. 이 과정에서 공유 축(.scaled) 애니메이션 효과가 적용됩니다.
5. 결과적으로, 사용자는 버튼을 클릭할 때마다 부드러운 전환 애니메이션과 함께 이미지가 변경되는 것을 볼 수 있습니다.

이 예제는 PageTransitionSwitcher와 SharedAxisTransition을 사용하여 효과적인 UI 전환을 구현하는 방법을 보여줍니다. 또한, ValueKey의 사용은 Flutter에서 위젯의 고유성 관리에 얼마나 중요한지를 강조합니다.

PageTransitionSwitcher의 transitionBuilder 인자 안에서 SharedAxisTransition 위젯을 구성하는 방법을 살펴봅시다. transitionBuilder는 페이지 전환 시에 사용할 애니메이션을 정의하는 데 사용됩니다. 여기서는 SharedAxisTransition을 사용하여, 두 페이지 사이의 전환을 위한 공유 축 애니메이션을 적용하고 있습니다. 각 파라미터의 역할은 다음과 같습니다:

• child: 전환할 자식 위젯입니다. 이 경우 전환 애니메이션과 함께 나타날 새로운 페이지(또는 위젯)을 가리킵니다.
• primaryAnimation: 새로운 자식 위젯이 화면에 들어올 때 적용되는 애니메이션입니다. SharedAxisTransition에서 이 애니메이션은 새로운 페이지가 어떻게 나타날지를 정의합니다.
• secondaryAnimation: 현재 자식 위젯이 화면에서 나갈 때 적용되는 애니메이션입니다. 이는 현재 페이지가 어떻게 사라질지를 정의합니다.
• transitionType: 전환 유형을 결정합니다. 여기서는 SharedAxisTransitionType.scaled가 사용되었는데, 이는 전환하는 동안 원본과 대상 위젯이 스케일링되는 효과를 만듭니다. SharedAxisTransitionType에는 .scaled, .horizontal, .vertical 등의 다른 옵션도 있어서 전환 효과를 다양하게 설정할 수 있습니다.

이 코드 조각은 Flutter 앱에서 페이지 또는 위젯 간의 전환을 더 시각적으로 매력적으로 만들기 위해 사용됩니다. SharedAxisTransition을 사용하면 사용자가 콘텐츠 간을 탐색할 때 자연스럽고 부드러운 느낌을 줄 수 있어, 전반적인 사용자 경험을 향상시키는 데 유용합니다.