[flutter] AnimatedContainer의 커맨드 속성 활용하기

08 Dec 2023

flutter

Flutter에서 UI 요소의 애니메이션을 다룰 때 AnimatedContainer는 매우 유용한 위젯입니다. 그 중에서도 curve 속성은 애니메이션의 동작을 조절하는 데 중요한 옵션 중 하나입니다. curve 속성을 효과적으로 활용하여 애니메이션을 부드럽게 만들고 사용자 경험을 향상시킬 수 있습니다.

이번 글에서는 AnimatedContainer의 curve 속성을 사용하여 다양한 애니메이션 효과를 구현하는 방법에 대해 알아보겠습니다.

1. AnimatedContainer란 무엇인가

AnimatedContainer는 주어진 시간 동안 지정된 속성값으로 자동적으로 변하는 컨테이너입니다. 이를 통해 아주 쉽게 애니메이션 효과를 제어할 수 있습니다.

2. Curve 속성의 역할

curve 속성은 애니메이션의 진행 방식을 정의하는 데 사용됩니다. 다양한 Curve 클래스를 통해 다양한 애니메이션 진행 방식을 설정할 수 있습니다. Curves.easeIn이나 Curves.easeOut과 같은 값을 지정하여 부드러운 애니메이션을 만들 수 있습니다.

3. 적용 사례

3.1 부드러운 크기 변경 애니메이션

아래 예제는 AnimatedContainer의 curve 속성을 이용하여 크기 변환 애니메이션을 적용하는 예시입니다.

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeIn,
  width: _isEnlarged ? 200.0 : 100.0,
  height: _isEnlarged ? 200.0 : 100.0,
  child: YourChildWidget(),
)

3.2 레이아웃 변경시 효과적인 애니메이션

다음 예제는 AnimatedContainer를 사용하여 레이아웃 변경시 부드러운 애니메이션을 적용하는 예시입니다.

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeOutCirc,
  padding: _isPadded ? EdgeInsets.all(20.0) : EdgeInsets.all(0.0),
  child: YourChildWidget(),
)

4. 마무리

이 글에서는 AnimatedContainer의 curve 속성을 이용하여 다양한 애니메이션 효과를 구현하는 방법에 대해 알아보았습니다. curve 속성을 효과적으로 활용하면 사용자에게 더 나은 경험을 제공할 수 있습니다. 애니메이션을 다룰 때 curve 속성을 잊지 말고 활용해보세요!

목차