24. [Flutter] AnimatedCrossFade 화면 전환 애니메이션 및 Drag 기능 만들기(with GestureDetector)

AnimatedCrossFade 

AnimatedCrossFade 위젯은 두 개의 자식 위젯 간에 부드러운 전환 효과를 제공하는 Flutter 애니메이션 위젯입니다. 

첫 번째 자식 위젯과 두 번째 자식 위젯 사이에서 애니메이션을 통해 전환되며, 애니메이션 지속 시간과 전환 상태에 따라 어떤 자식 위젯이 표시될지 결정됩니다.

 

bool _showFirstWidget = true; // 첫 번째 자식 위젯을 표시할지 여부를 결정하는 변수

Widget build(BuildContext context) {
  return AnimatedCrossFade(
    duration: const Duration(milliseconds: 500), // 애니메이션 지속 시간
    firstChild: Container(
      // 첫 번째 자식 위젯
    ),
    secondChild: Container(
      // 두 번째 자식 위젯
    ),
    crossFadeState: _showFirstWidget
        ? CrossFadeState.showFirst
        : CrossFadeState.showSecond,
    // crossFadeState에 따라 첫 번째 자식 또는 두 번째 자식을 표시합니다.
  );
}

 

위의 예시에서는 _showFirstWidget 변수에 따라 첫 번째 자식 위젯 또는 두 번째 자식 위젯을 표시합니다. _showFirstWidget 값이 true일 때는 첫 번째 자식 위젯이 표시되고, false일 때는 두 번째 자식 위젯이 표시됩니다. AnimatedCrossFade 위젯은 이 값의 변화에 따라 애니메이션을 수행하여 자식 위젯 간의 전환 효과를 만들어줍니다.

애니메이션의 지속 시간은 duration 속성을 통해 설정할 수 있으며, firstChild와 secondChild 속성을 사용하여 첫 번째 자식 위젯과 두 번째 자식 위젯을 정의합니다.

crossFadeState 속성은 _showFirstWidget 값에 따라 CrossFadeState.showFirst 또는 CrossFadeState.showSecond를 설정하여 어떤 자식 위젯을 표시할지 결정합니다.

이렇게 구성된 AnimatedCrossFade 위젯은 _showFirstWidget 값이 변경될 때마다 첫 번째 자식 위젯과 두 번째 자식 위젯 간의 전환 애니메이션을 수행합니다.

---

 

예시.

import 'package:flutter/material.dart';

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

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  late bool _showFirstWidget = true;
  late bool _dragleft = true;
  void _onPanUpdate(DragUpdateDetails details) {
    if (details.delta.dx > 0) {
      setState(() {
        _dragleft = true;
      });
    } else {
      setState(() {
        _dragleft = false;
      });
    }
  }

  void _onPanEnd(DragEndDetails details) {
    if (_dragleft) {
      setState(() {
        _showFirstWidget = true;
      });
    } else {
      setState(() {
        _showFirstWidget = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: _onPanUpdate,
      onPanEnd: _onPanEnd,
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(30),
          child: AnimatedCrossFade(
              firstChild: const Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'AnimatedCrossFade\nFirst Screen\n\nDrag Right to Left →',
                    style: TextStyle(fontSize: 40),
                  )
                ],
              ),
              secondChild: const Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'AnimatedCrossFade\nSecond Screen\n\nDrag Left to Right ←',
                    style: TextStyle(fontSize: 40),
                  )
                ],
              ),
              crossFadeState: _showFirstWidget
                  ? CrossFadeState.showFirst
                  : CrossFadeState.showSecond,
              duration: const Duration(milliseconds: 300)),
        ),
      ),
    );
  }
}

설명.

• 위젯은 onPanUpdate와 onPanEnd 이벤트를 처리하기 위해 GestureDetector를 사용합니다. 
• onPanUpdate 이벤트는 사용자가 화면에서 드래그하는 동안 호출되며, 드래그 방향에 따라 _dragleft 변수를 설정합니다.
• onPanEnd 이벤트는 사용자가 드래그를 끝내면 호출되며, _dragleft 변수를 확인하여 _showFirstWidget 값을 업데이트합니다.
• AnimatedCrossFade 위젯은 첫 번째 자식과 두 번째 자식 위젯 사이를 애니메이션으로 전환합니다.
• _showFirstWidget 값에 따라 첫 번째 자식 위젯 또는 두 번째 자식 위젯이 표시됩니다. 첫 번째 자식 위젯은 오른쪽에서 왼쪽으로 드래그하여 전환하고, 두 번째 자식 위젯은 왼쪽에서 오른쪽으로 드래그하여 전환합니다. 화면에는 텍스트와 함께 각 자식 위젯에 대한 설명이 포함되어 있습니다.
• 애니메이션의 지속 시간은 duration 속성을 통해 설정됩니다. 코드에서는 300밀리초로 설정되어 있습니다.
• 이를 통해 사용자는 화면에서 드래그하여 두 개의 화면을 전환할 수 있습니다. 드래그 방향에 따라 _showFirstWidget 값이 변경되어 AnimatedCrossFade 위젯이 애니메이션을 수행하고, 새로운 화면이 표시됩니다.