AnimatedContainer

Flutter에서 동적인 UI 생성하기: AnimatedContainer

AnimatedContainer는 Flutter에서 제공하는 매우 유용한 위젯 중 하나로, 컨테이너의 속성이 변경될 때 자동으로 부드러운 전환 애니메이션을 제공합니다. 이 위젯을 사용하면 개발자는 애니메이션에 대한 복잡한 코드를 작성할 필요 없이 손쉽게 시각적 효과를 추가할 수 있습니다.

주요 속성

• duration: 애니메이션의 지속 시간을 결정합니다. Duration 객체를 사용하여 설정합니다.

• curve: 애니메이션의 속도 곡선을 정의합니다. 기본값은 Curves.linear입니다.

• width: 컨테이너의 너비입니다. 이 값이 변경되면 애니메이션과 함께 너비가 조정됩니다.

• height: 컨테이너의 높이입니다. 높이 변경 시 부드러운 전환을 통해 조정됩니다.

• color: 컨테이너의 배경색입니다. 색상 변경 시 애니메이션 효과가 적용됩니다.

• decoration: 컨테이너의 박스 장식을 정의합니다. 그라디언트, 이미지, 테두리 등을 포함할 수 있습니다.

주요 활용도

• 인터랙티브 UI 요소: 사용자의 입력에 따라 동적으로 크기, 색상 또는 형태가 변하는 UI 요소에 적합합니다.

• 시각적 피드백 제공: 버튼 클릭이나 선택 상태와 같은 사용자의 행동에 대해 시각적으로 응답함으로써 더 나은 사용자 경험을 제공합니다.

• 동적 레이아웃 변경: 화면의 레이아웃이 사용자의 행동이나 앱의 상태에 따라 변경될 때, 그 변화를 부드럽게 전환합니다.

코드 예제

다음 예제는 AnimatedContainer를 사용하여 클릭 시 컨테이너의 크기와 색상을 변경하는 방법을 보여줍니다.

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

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

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Center(
        child: AnimatedContainer(
          width: selected ? 200.0 : 100.0,
          height: selected ? 100.0 : 200.0,
          color: selected ? Colors.red : Colors.blue,
          alignment:
              selected ? Alignment.center : AlignmentDirectional.topCenter,
          duration: const Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          child: const FlutterLogo(size: 75),
        ),
      ),
    );
  }
}

추가 팁

• 효과적인 애니메이션 사용: 너무 많은 애니메이션은 사용자에게 부담을 줄 수 있으므로, 애니메이션의 사용은 효과적이고 필요한 경우에 한정하는 것이 좋습니다.

• 성능 최적화 고려: 복잡한 애니메이션은 앱의 성능에 영향을 줄 수 있으므로, 애니
  메이션 효과를 적용할 때는 성능 저하를 고려해야 합니다.

관련 자료

• AnimatedPadding: 패딩 값이 변경될 때 그 변경을 부드럽게 애니메이션화합니다. duration과 curve를 설정하여 애니메이션 효과를 제어할 수 있습니다.

• AnimatedPositioned: 스택(Stack) 내의 위치를 애니메이션으로 조정합니다. 위치가 변경될 때 자동으로 지정된 기간 동안 부드러운 위치 이동을 수행합니다.

• AnimatedAlign: 자식 위젯의 정렬 위치를 애니메이션으로 조정합니다. alignment 값이 변경될 때 설정된 지속 시간에 따라 부드러운 전환을 제공합니다.

• AnimatedSwitcher: 자식 위젯을 교체할 때 전환 효과를 애니메이션으로 구현합니다. 다양한 애니메이션 효과를 사용하여 두 자식 위젯 간의 교체를 시각적으로 매력적으로 표현할 수 있습니다.

• AnimatedCrossFade: 두 자식 위젯 간의 크로스-페이드를 애니메이션으로 구현합니다. 위젯의 크기 변화도 보간하여 전환 중에 자연스러운 효과를 제공합니다.

추가 참고 리소스

• AnimatedContainer (Flutter Widget of the Week)
• 공식 문서 - AnimatedContainer