FadeThroughTransition

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

// FadeThrough 애니메이션을 적용한 화면 전환 예시
class FadeThroughScreen extends StatefulWidget {
  const FadeThroughScreen({super.key});

  @override
  State<FadeThroughScreen> createState() => _FadeThroughScreenState();
}

class _FadeThroughScreenState extends State<FadeThroughScreen> {
  int _index = 0; // 현재 선택된 탭의 인덱스

  // 새로운 탭으로 전환할 때 호출되는 함수
  void _onNewDestination(int index) {
    setState(() {
      _index = index; // 선택된 탭 인덱스 업데이트
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Fade Through"), // 앱 바 제목
      ),
      body: PageTransitionSwitcher(
        duration: const Duration(milliseconds: 300), // 애니메이션 지속 시간
        transitionBuilder: (child, primaryAnimation, secondaryAnimation) =>
            FadeThroughTransition(
              animation: primaryAnimation,
              secondaryAnimation: secondaryAnimation,
              child: child,
            ),
        child: [
          const NavigationPage(
            key: ValueKey(0), // 탭 변경을 위한 고유 키
            text: "Profile", // 프로필 페이지
            icon: Icons.person,
          ),
          const NavigationPage(
            key: ValueKey(1), // 알림 페이지
            text: "Notifications",
            icon: Icons.notifications,
          ),
          const NavigationPage(
            key: ValueKey(2), // 설정 페이지
            text: "Settings",
            icon: Icons.settings,
          ),
        ][_index], // 현재 선택된 페이지
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _index, // 선택된 인덱스
        onDestinationSelected: _onNewDestination, // 탭 선택 시 호출
        destinations: const [
          NavigationDestination(
            selectedIcon: Icon(Icons.person), // 선택 시 아이콘
            icon: Icon(Icons.person_outline), // 비선택 시 아이콘
            label: "Profile", // 레이블
          ),
          NavigationDestination(
            selectedIcon: Icon(Icons.notifications),
            icon: Icon(Icons.notifications_outlined),
            label: "Notifications",
          ),
          NavigationDestination(
            icon: Icon(Icons.settings_outlined),
            selectedIcon: Icon(Icons.settings),
            label: "Settings",
          )
        ],
      ),
    );
  }
}

// 각 탭의 페이지를 나타내는 위젯
class NavigationPage extends StatelessWidget {
  final String text;
  final IconData icon;

  const NavigationPage({
    super.key,
    required this.text,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon, // 페이지 아이콘
              size: 48,
            ),
            Text(
              text, // 페이지 텍스트
              style: const TextStyle(
                fontSize: 20,
              ),
            )
          ],
        ),
      ),
    );
  }
}

FadeThroughScreen 클래스와 관련 로직은 Flutter에서 페이지 간 전환에 FadeThroughTransition 애니메이션을 사용하는 방법을 보여줍니다. 이 예제에서는 세 개의 주요 구성 요소를 사용하여 구현됩니다: PageTransitionSwitcher, FadeThroughTransition, 그리고 NavigationBar를 통한 사용자 상호작용입니다. 각 구성 요소의 역할은 다음과 같습니다:

1. PageTransitionSwitcher

PageTransitionSwitcher는 자식 위젯 간의 전환을 처리합니다. 이 위젯은 자식이 변경될 때마다 새로운 자식에 대한 애니메이션을 자동으로 적용합니다. 여기서는 세 개의 다른 페이지(또는 위젯)로 전환하기 위해 사용됩니다.

2. FadeThroughTransition

FadeThroughTransition은 animations 패키지에서 제공하는 애니메이션으로, 하나의 요소가 점점 사라지면서 동시에 새 요소가 서서히 나타나는 효과를 생성합니다. 이는 primaryAnimation과 secondaryAnimation을 활용하여 구현됩니다. primaryAnimation은 새로운 자식이 화면에 들어오는 방식을 제어하고, secondaryAnimation은 현재 자식이 화면에서 나가는 방식을 제어합니다.

3. NavigationBar & NavigationDestination

NavigationBar는 화면 하단에 위치한 네비게이션 바입니다. 이는 사용자가 서로 다른 페이지(또는 탭) 사이를 전환할 수 있게 해주며, 각 NavigationDestination은 네비게이션 바 내의 개별 항목을 나타냅니다. 사용자가 이 항목 중 하나를 선택하면 _onNewDestination 함수가 호출되어 _index 상태가 업데이트되고, 새로운 페이지로의 전환을 촉발합니다.

로직의 흐름

• 앱의 NavigationBar에서 사용자가 항목을 선택하면, _onNewDestination 함수가 호출됩니다. 이 함수는 새로운 탭 인덱스를 _index 상태 변수에 할당하여 setState를 통해 앱 상태를 업데이트합니다.
• _index의 변경으로 인해 PageTransitionSwitcher 내의 child가 새로운 NavigationPage 인스턴스로 업데이트됩니다. 각 NavigationPage는 고유의 ValueKey를 가지고 있어서 PageTransitionSwitcher가 어떤 페이지가 현재 활성화되어 있는지 판단할 수 있게 합니다.
• 새로운 자식 위젯으로의 전환 시, FadeThroughTransition 애니메이션을 사용하여 현재 페이지에서 새 페이지로 부드럽게 전환됩니다.

이 구현은 사용자가 앱 내에서 다른 섹션으로 넘어갈 때 시각적으로 만족스러운 전환 효과를 제공합니다. FadeThroughTransition은 사용자 경험을 개선하고 앱의 전반적인 매력을 높이는 데 효과적인 방법입니다.