AnimatedDefaultTextStyle

AnimatedDefaultTextStyle는 텍스트 스타일의 변화를 애니메이션 효과와 함께 부드럽게 전환하는 위젯입니다. 이 위젯의 주요 기능은 기본 텍스트 스타일의 변화를 자식 위젯들에게 전달하면서 해당 변화를 애니메이션으로 보여주는 것입니다.

사용법:

AnimatedDefaultTextStyle(
  style: TextStyle(
    fontSize: isLargeText ? 50.0 : 20.0,
    color: isRedColor ? Colors.red : Colors.blue,
  ),
  duration: const Duration(seconds: 1),
  child: Text('애니메이션 텍스트'),
),

위 예시에서는 isLargeText와 isRedColor라는 두 가지 조건에 따라 텍스트의 크기와 색상이 변화합니다. AnimatedDefaultTextStyle 위젯은 해당 변화를 부드럽게 애니메이션 효과로 표시해줍니다.

주요 속성:

• style: 애니메이션될 텍스트 스타일을 지정합니다.
• duration: 애니메이션 지속 시간을 지정합니다.
• child: 이 위젯의 자식 위젯입니다. 이 자식 위젯의 DefaultTextStyle은 부모인 AnimatedDefaultTextStyle의 style 속성에 따라 변화됩니다.
• onEnd: 애니메이션이 끝났을 때 실행될 콜백 함수를 지정할 수 있습니다.

이 위젯은 텍스트의 스타일 변화를 애니메이션 효과로 간편하게 적용할 수 있어 매우 유용합니다.

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(
        padding: const EdgeInsets.symmetric(
          vertical: Sizes.size16,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(Sizes.size5),
          color:
              disabled ? Colors.grey.shade300 : Theme.of(context).primaryColor,
        ),
        duration: const Duration(milliseconds: 500),
        child: AnimatedDefaultTextStyle(
          duration: const Duration(milliseconds: 500),
          style: TextStyle(
            color: disabled ? Colors.grey.shade400 : Colors.white,
            fontWeight: FontWeight.w600,
          ),
          child: const Text(
            'Next',
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

AnimatedDefaultTextStyle는 주로 텍스트의 스타일 변화를 부드럽게 표현할 때 사용하는 위젯입니다. 이 위젯의 가장 중요한 특징은 텍스트 스타일의 변화를 자연스럽게 애니메이션 효과로 표현할 수 있다는 점입니다.

FormButton 위젯에서 AnimatedDefaultTextStyle는 다음과 같은 역할을 합니다:

1. style: 이 속성은 텍스트의 최종 스타일을 정의합니다. FormButton에서는 disabled 변수의 값에 따라 텍스트의 색상이 바뀌도록 설정되어 있습니다.

2. duration: 애니메이션의 지속 시간을 지정합니다. FormButton에서는 500밀리초로 설정되어 있어, 텍스트 스타일의 변화가 0.5초 동안 진행됩니다.

3. child: 애니메이션 효과를 적용할 텍스트 위젯입니다.

FormButton에서 사용자가 입력을 완료하거나 조건에 따라 버튼을 활성화/비활성화할 때, disabled 변수의 값이 변경됩니다. 그에 따라 버튼의 배경색(AnimatedContainer)과 텍스트 색상(AnimatedDefaultTextStyle)이 동시에 부드럽게 변경됩니다.

즉, AnimatedDefaultTextStyle는 사용자에게 버튼의 상태 변화를 더 직관적이고 자연스럽게 인지시키기 위한 역할을 합니다. 텍스트의 스타일이 갑자기 바뀌는 것이 아니라, 지정된 시간 동안 부드럽게 바뀌므로 사용자 경험이 좋아집니다.