AnimatedAlign, AnimatedOpacity

import 'package:flutter/material.dart';

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

  @override
  State<ImplicitAnimationsScreen> createState() =>
      _ImplicitAnimationsScreenState();
}

class _ImplicitAnimationsScreenState extends State<ImplicitAnimationsScreen> {
  bool _visible = true;

  void _trigger() {
    setState(() {
      _visible = !_visible;
    });
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Implict Animations'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedAlign(
              duration: const Duration(seconds: 2),
              alignment: _visible ? Alignment.topLeft : Alignment.topRight,
              child: AnimatedOpacity(
                opacity: _visible ? 1 : 0.2,
                duration: const Duration(seconds: 2),
                child: Container(
                  width: size.width * 0.8,
                  height: size.width * 0.8,
                  color: Colors.amber,
                ),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            ElevatedButton(
              onPressed: _trigger,
              child: const Text('Go!'),
            )
          ],
        ),
      ),
    );
  }
}

이 Flutter 예제에서는 두 가지 주요 암시적 애니메이션 위젯, AnimatedAlign과 AnimatedOpacity,을 사용하여 애니메이션 효과를 구현하고 있습니다.

1. _trigger() 메서드와 setState():

   • 사용자가 'Go!' 버튼을 누르면 _trigger() 메서드가 호출됩니다.
   • 이 메서드 내에서, _visible 변수의 불리언 값이 반전됩니다 (즉, true가 false로, 또는 그 반대로 변경됩니다).
   • setState() 함수 호출을 통해 Flutter에게 위젯 트리의 일부가 변경되었으며 다시 빌드해야 함을 알립니다.

2. AnimatedAlign 위젯:

   • AnimatedAlign은 자식 위젯의 정렬(alignment)을 애니메이션화합니다.
   • 이 예제에서는 _visible 상태에 따라 alignment 속성이 Alignment.topLeft 또는 Alignment.topRight로 변경됩니다.
   • 이 변경은 지정된 duration (여기서는 2초) 동안 부드럽게 전환됩니다.
   • 결과적으로, 컨테이너는 왼쪽 상단과 오른쪽 상단 사이를 부드럽게 이동합니다.

3. AnimatedOpacity 위젯:

   • AnimatedOpacity는 자식 위젯의 투명도(opacity)를 애니메이션화합니다.
   • _visible 값에 따라 opacity 속성이 1 (완전 불투명)에서 0.2 (부분적으로 투명)로 변경됩니다.
   • 이 변화도 duration 동안 부드럽게 진행됩니다.
   • 따라서 컨테이너의 투명도가 변경되면서 부드러운 페이드 인/아웃 효과가 생성됩니다.

이러한 애니메이션의 핵심은 _trigger() 메서드가 호출될 때마다 setState()가 호출되어 위젯의 상태가 변경되고, 이 상태 변경이 AnimatedAlign과 AnimatedOpacity 위젯에 의해 자동으로 애니메이션 효과로 변환된다는 점입니다. 이 방식은 복잡한 애니메이션 로직이나 명시적인 AnimationController를 작성할 필요 없이, 간단하고 효율적인 UI 애니메이션을 구현할 수 있게 해줍니다.

Flutter에서 암시적 애니메이션은 UI를 더욱 동적이고 상호작용적으로 만들기 위한 강력한 방법입니다. 초보 개발자가 Flutter의 애니메이션 시스템을 이해하고 실습하는 데 이 예제가 매우 유용할 것입니다.