[Flutter] AnimatedCrossFade

AnimatedCrossFade는 두 개의 위젯 사이를 부드럽게 전환하는 애니메이션을 제공하는 Flutter 위젯입니다. 주어진 두 개의 자식 위젯 사이에서 전환되며, 전환될 때 페이드 인/아웃 애니메이션 효과를 제공합니다.

AnimatedCrossFade 위젯의 주요 속성은 다음과 같습니다:

• firstChild: 첫 번째 자식 위젯입니다. 전환 중에 보여질 위젯입니다.
• secondChild: 두 번째 자식 위젯입니다. 전환 중에 가려질 위젯입니다.
• crossFadeState: 전환 상태를 나타내는 CrossFadeState 값입니다. 주로 CrossFadeState.showFirst 또는 CrossFadeState.showSecond 값을 사용합니다.
• duration: 전환 애니메이션의 지속 시간을 나타내는 Duration 값입니다.

다음은 AnimatedCrossFade의 간단한 예제 코드입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

enum CrossFadeStatus { First, Second }

class _MyAppState extends State<MyApp> {
  CrossFadeStatus status = CrossFadeStatus.First;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedCrossFade 예제'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedCrossFade(
                duration: Duration(seconds: 1),
                firstChild: Container(
                  width: 200,
                  height: 200,
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      '첫 번째 위젯',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                      ),
                    ),
                  ),
                ),
                secondChild: Container(
                  width: 200,
                  height: 200,
                  color: Colors.red,
                  child: Center(
                    child: Text(
                      '두 번째 위젯',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                      ),
                    ),
                  ),
                ),
                crossFadeState: status == CrossFadeStatus.First
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    status = status == CrossFadeStatus.First
                        ? CrossFadeStatus.Second
                        : CrossFadeStatus.First;
                  });
                },
                child: Text('전환'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서는 AnimatedCrossFade 위젯을 사용하여 "첫 번째 위젯"과 "두 번째 위젯" 사이를 전환합니다. CrossFadeStatus라는 열거형을 사용하여 전환 상태를 추적하고, 버튼을 누를 때마다 전환 상태를 변경하고 setState를 호출하여 화면을 다시 그립니다. AnimatedCrossFade 위젯은 duration 속성을 사용하여 전환 애니메이션의 지속 시간을 지정합니다.

위 예제 코드를 실행하면 "첫 번째 위젯"과 "두 번째 위젯"이 번갈아가며 부드럽게 전환됩니다. 버튼을 클릭하면 setState를 통해 전환 상태가 변경되고, AnimatedCrossFade 위젯을 통해 전환 애니메이션이 수행됩니다.

AnimatedCrossFade를 사용하면 두 개의 위젯 사이를 부드럽게 전환하고 애니메이션 효과를 추가할 수 있습니다. 이를 활용하여 다양한 화면 전환 효과를 구현할 수 있습니다.