[Flutter] AnimatedContainer

Flutter의 AnimatedContainer 위젯은 컨테이너의 크기, 색상, 경계선 등을 애니메이션화하여 부드러운 애니메이션을 만들 수 있는 위젯입니다.

AnimatedContainer 위젯은 Container와 유사하지만, 프로퍼티들이 변경될 때 자연스러운 애니메이션을 제공합니다. 예를 들어, 다음과 같은 코드를 작성하여 AnimatedContainer를 사용할 수 있습니다.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _large = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {
          setState(() {
            _large = !_large;
          });
        },
        child: AnimatedContainer(
          duration: Duration(seconds: 1),
          width: _large ? 200.0 : 100.0,
          height: _large ? 200.0 : 100.0,
          color: _large ? Colors.red : Colors.blue,
          child: Center(
            child: Text(
              _large ? 'Large' : 'Small',
              style: TextStyle(
                fontSize: 24.0,
                color: Colors.white,

위 코드는 _large 상태 변수에 따라 AnimatedContainer의 너비, 높이, 색상을 변경하도록 합니다. onTap 이벤트가 발생하면 _large 변수가 반전되므로, AnimatedContainer는 새로운 프로퍼티 값으로 자연스러운 애니메이션을 만들어내게 됩니다.

AnimatedContainer 위젯은 이외에도, curve 속성을 사용하여 애니메이션의 속도 곡선을 조정할 수 있습니다. 또한, 애니메이션이 끝나면 특정 동작을 수행하도록 onEnd 콜백 함수를 정의할 수도 있습니다.