[Flutter] 손쉬운 애니메이션 Widget 적용 (AnimatedContainer, AnimatedDefaultTextStyle)

Flutter에서 필요에 따라 버튼과 텍스트에 색상 변환을 주곤한다.

예를 들어 빈 값이면 회색, 값이 있으면 파란색을 설정하거나, 일반적으로 검은색 글씨에 오류가 발생하면 붉은색 글씨로 변경하는 등 같은 위젯에 색상 변화를 주게되는 요인은 많다.

 

이에 따라 좀 더 UI를 부드럽게 구현을 하기 위해 애니메이션 적용하는 것은 좋은 방향이다.

 

이번에는 Widget에 애니메이션을 넣는 가장 단순한 방법을 배워 볼 것이다.

Container에 적용하는 방법으로 AnimatedContainer Widget과 Text에 적용하는 방법인 AnimatedDefaultTextStyle Widget의 사용법을 알아보자.

 

위 이미지는 TextFiled의 값이 empty가 아니면 버튼과 Text의 색상을 변경하는 예제이다.

예제 코드는 다음과 같다.

class FormButton extends StatelessWidget {
  const FormButton({
    super.key,
    required this.disabled,
  });

  final bool disabled;

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: 1,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 500),
        padding: const EdgeInsets.symmetric(
          vertical: Sizes.size14,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          color: disabled ? Colors.grey.shade400 : Theme.of(context).primaryColor,
        ),
        child: AnimatedDefaultTextStyle(
          duration: const Duration(milliseconds: 500),
          style: TextStyle(
            color: disabled ? Colors.grey.shade600 : Colors.white,
            fontWeight: FontWeight.w600,
          ),
          child: const Text(
            'Next',
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

 

Class를 호출하는 곳에서 disable의 값에 따라 색상이 바뀌게 설정이 되었는데,  버튼을 구성하는 Widget으로 Container 대신 AnimatedContainer를 사용했고, 필수 prameter인 duration을 추가했다.

그 효과로 Box의 색상이 duration의 시간에 따라 자연스럽게 변하게 되었다.

 

마찬가지로 원래 Text 안에 작성되어야 할 style: TextStyle(...)을 바깥으로 빼 내어 AnimatedDefaultTextStyle Widget으로 감싸 duration과 함께 설정해주면 자연스럽게 색상이 변하게 된다.

 

단순하게 Widget과 duration을 적용하는 것만으로 쉽게 Animation 효과가 추가가 되었다.

Flutter에서 이러한 Widget의 종류를 알고 있는 것만으로도 충분히 도움이 될 것이라 생각 된다.