[Flutter] 플러터의 기본적인 암시적 애니메이션 위젯

암시적 애니메이션

• 개발자가 직접 애니메이션의 세부 동작을 구현하지 않아도, 위젯의 속성이 변경되면 자동으로 애니메이션 효과가 적용되는 애니메이션

첫 번째 위젯

import 'package:flutter/material.dart';

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

  @override
  State<StatefulWidget> createState() => _AnimatedAlignExampleState();
}

class _AnimatedAlignExampleState extends State<AnimatedAlignExample> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Container(
        height: 300,
        color: Colors.blue,
        child: AnimatedAlign(
          curve: Curves.easeIn,
          alignment: selected ? Alignment.topRight : Alignment.bottomLeft,
          duration: Duration(seconds: 1),
          child: Container(width: 50, height: 50, color: Colors.red),
        ),
      ),
    );
  }
}

AnimatedAlign 위젯

• alignment 속성이 변경되면 애니메이션 진행되는 위젯
• 위 코드에서는 alignment 속성이 topRight에서 bottomLeft로 변해, 컨테이너를 대각선으로 가로지르는 애니메이션이 출력된다.

두 번째 위젯

import 'package:flutter/material.dart';

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

  @override
  State<StatefulWidget> createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Container(
        height: 300,
        width: double.infinity,
        color: Colors.green,
        alignment: Alignment.center,
        child: AnimatedContainer(
          height: selected ? 50 : 150,
          width: selected ? 50 : 150,
          decoration: BoxDecoration(
            color: selected ? Colors.red : Colors.amber,
            borderRadius: BorderRadius.circular(selected ? 0 : 20),
          ),
          curve: Curves.easeIn,
          duration: Duration(seconds: 1),
        ),
      ),
    );
  }
}

AnimatedContainer 위젯

• alignment, decoration, width, height, padding 등의 속성이 변경되면 애니메이션 진행되는 위젯
• 위 코드에서는 height, width가 각각 50에서 150으로 늘어나고, color가 빨간색에서 노란색으로, 테두리 모양이 직각에서 둥근 모양으로 변하는 것을 확인할 수 있다.

세 번째 위젯

import 'package:flutter/material.dart';

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

  @override
  State<StatefulWidget> createState() => _AnimatedOpacityExampleState();
}

class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Container(
        height: 300,
        color: Colors.blue,
        alignment: Alignment.center,
        child: AnimatedOpacity(
          opacity: selected ? 0 : 1,
          curve: Curves.easeIn,
          duration: Duration(seconds: 1),
          child: Container(width: 200, height: 50, color: Colors.red),
        ),
      ),
    );
  }
}

AnimatedOpacity 위젯

• opacity 속성이 변경되면 애니메이션 진행되는 위젯
• 위 코드에서는 opacity가 0에서 1로 변해 투명했던 컨테이너가 나타나는 것을 볼 수 있다.

네 번째 위젯

import 'package:flutter/material.dart';

class AnimatedPositionedExample extends StatefulWidget {
  const AnimatedPositionedExample({super.key});
  @override
  State<AnimatedPositionedExample> createState() =>
      _AnimatedPositionedExampleState();
}

class _AnimatedPositionedExampleState extends State<AnimatedPositionedExample> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Container(
        height: 300,
        color: Colors.green,
        alignment: Alignment.center,
        child: Stack(
          children: [
            AnimatedPositioned(
              left: selected ? MediaQuery.of(context).size.width - 50 : 0,
              top: selected ? 250 : 0,
              curve: Curves.easeIn,
              duration: Duration(seconds: 1),
              child: Container(width: 50, height: 50, color: Colors.red),
            ),
          ],
        ),
      ),
    );
  }
}

AnimatedPositioned 위젯

• position 속성이 변경되면 애니메이션 진행되는 위젯
• AnimatedAlignment 위젯과 비슷하지만 조금 더 정확한 수치 조정을 할 수 있다.
• 위 코드에서는 오른쪽 최하단에서 왼쪽 최상단으로 대각선 이동하는 듯한 애니메이션이 출력된다.