AnimatedContainer

AnimatedContainer(
    duration: const Duration(milliseconds: 300),
    padding: const EdgeInsets.symmetric(vertical: Sizes.size16),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(Sizes.size5),
      color: _username.isEmpty
          ? Colors.grey.shade300
          : Theme.of(context).primaryColor,
    ),
    child: Text(
      'Next',
      textAlign: TextAlign.center,
      style: TextStyle(
        color:
            _username.isEmpty ? Colors.grey.shade400 : Colors.white,
        fontSize: Sizes.size16,
        fontWeight: FontWeight.w600,
      ),
    ),
  ),

를 이용해서 container의 색상이 300ms 동안 천천히 변하는 것을 구현할 수 있지만 이것의 자식 위젯들은 바로 바뀌는 문제가 있다.

이 문제를 해결하기 위해 [[AnimatedDefaultTextStyle]] Widget을 사용한다.

ChatGPT

AnimatedContainer은 Flutter에서 사용하는 위젯 중 하나로, 시간에 따라 점진적으로 변화하는 다양한 속성을 가진 컨테이너를 만들 때 사용됩니다. 이 위젯은 Container 위젯의 애니메이션 버전이라고 볼 수 있으며, 지정된 기간 동안 부드럽게 속성들이 변화합니다.

주요 특징

1. 애니메이션 속성: AnimatedContainer는 크기, 색상, 테두리, 여백 등과 같은 여러 속성을 애니메이션화할 수 있습니다.
2. 지속 시간 설정: duration 속성을 통해 애니메이션이 얼마나 오래 지속될지 설정할 수 있습니다.
3. 커브(Curves): 애니메이션의 속도 곡선을 정의할 수 있으며, 이를 통해 애니메이션의 동작 방식을 더 세밀하게 조절할 수 있습니다.
4. 자동 갱신: AnimatedContainer의 속성이 변경되면, 위젯은 자동으로 새 속성 값으로 부드럽게 전환됩니다.

사용 방법 예시

AnimatedContainer(
  // 애니메이션 지속 시간 설정
  duration: Duration(seconds: 2),
  // 애니메이션에 적용할 속성
  width: _selected ? 200.0 : 100.0,
  height: _selected ? 100.0 : 200.0,
  color: _selected ? Colors.red : Colors.blue,
  alignment: _selected ? Alignment.center : Alignment.topRight,
  // 자식 위젯
  child: FlutterLogo(size: 75),
),

이 예시에서 _selected라는 상태 변수에 따라 AnimatedContainer의 크기, 색상, 정렬이 애니메이션과 함께 변경됩니다.

AnimatedContainer는 간단한 애니메이션 효과가 필요할 때 유용하게 사용될 수 있으며, 복잡한 애니메이션 로직을 직접 작성할 필요 없이 간단한 API를 통해 구현할 수 있어 매우 편리합니다.