Flutter 앱을 개발하다 보면 사용자 입력을 처리하는 동안 앱의 사용자 경험(UX)을 향상시키는 것이 중요합니다. 입력 에니메이션은 사용자가 버튼을 누르거나 입력 필드를 선택할 때 발생하는 시각적 피드백으로서, 앱의 반응성과 상호작용성을 증진시키는 데 도움이 됩니다. 이번에는 Flutter에서 입력 에니메이션을 사용하여 사용자 입력을 처리하는 방법을 살펴보겠습니다.

1. InputDecoration 활용

Flutter에서 입력 에니메이션을 구현하려면 InputDecoration을 사용할 수 있습니다. 아래 예제를 통해 InputDecoration을 이용하여 입력 필드에 간단한 에니메이션을 적용하는 방법을 확인해보겠습니다.

TextField(
  decoration: InputDecoration(
    labelText: '이름',
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue),
      borderRadius: BorderRadius.circular(10),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey),
      borderRadius: BorderRadius.circular(10),
    ),
  ),
)

focusedBorder 속성을 사용하여 입력 필드가 선택됐을 때의 테두리 스타일을 정의할 수 있습니다. 이를 통해 선택된 입력 필드 주변에 시각적인 변화를 줄 수 있습니다.

2. 움직이는 에니메이션 추가

입력 필드에 포커스가 이동할 때, 애니메이션 효과를 추가해보겠습니다. 예를 들어 입력 필드에 포커스가 이동하면 해당 필드의 사이즈를 변경하거나 색상을 변화시킬 수 있습니다.

Focus(
  onFocusChange: (hasFocus) {
    if (hasFocus) {
      // 포커스가 생기면 애니메이션 실행
      // 예: 컬러 변경 또는 크기 변화
    } else {
      // 포커스가 해제되면 애니메이션 종료
    }
  },
  child: TextFormField(
    decoration: InputDecoration(
      labelText: '비밀번호',
    ),
  ),
)

Focus 위젯은 포커스의 상태에 따라 애니메이션을 추가할 수 있는 유용한 방법을 제공합니다.

3. 애니메이션 라이브러리 활용

Flutter에는 다양한 애니메이션 라이브러리가 있으며, 이를 활용하여 입력 필드 포커스에 따른 애니메이션을 쉽게 추가할 수 있습니다.

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  decoration: BoxDecoration(
    border: Border.all(color: hasFocus ? Colors.blue : Colors.grey),
    borderRadius: BorderRadius.circular(hasFocus ? 10 : 0),
  ),
  child: TextFormField(
    decoration: InputDecoration(
      labelText: '이메일',
    ),
  ),
)

AnimatedContainer를 사용하여 입력 필드가 포커스를 받을 때 테두리 스타일이 변경되도록 할 수 있습니다.

입력 에니메이션을 활용하여 사용자 입력 처리를 더욱 흥미롭고 직관적으로 만들 수 있습니다. 기존의 static한 UI보다 더 동적이고 상호작용성 있는 UI를 구현하고자 한다면, 입력 에니메이션을 적극적으로 활용해보시기 바랍니다.

이와 관련된 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.

내용에 대한 자세한 내용은 여기를 참조하세요.