항상 헷갈리는 InputDecoration의 속성에 대하여 정리해봅시다.
icon: 필드의 왼쪽에 표시되는 아이콘입니다.
labelText: 필드 위에 표시되는 레이블 텍스트입니다.
helperText: 필드 하단에 표시되는 보조 텍스트입니다.
hintText: 필드에 입력할 값에 대한 힌트 텍스트입니다.
errorText: 필드 하단에 표시되는 오류 메시지 텍스트입니다.
floatingLabelBehavior 라벨이 텍스트 필드 위에 떠있는 동안 어떻게 보일지를 정할 수 있습니다. 자동으로 떠오르게 할지, 사용자가 입력하기 전에는 내려가게 할지, 항상 위에 떠있게 할지 등의 설정을 할 수 있습니다.
floatingLabelAlignment: floating label을 정렬하는 위치를 나타냅니다. 이 속성은 AlignmentGeometry 객체를 사용하여 설정할 수 있습니다. 예를 들어, Alignment.topLeft 값을 설정하면 라벨이 왼쪽 위에 떠있게 됩니다.
isCollapsed: isCollapsed 속성은 라벨의 여백을 제거하고 입력 영역을 최대한 확장합니다. 이 속성을 true로 설정하면 라벨의 여백이 사라지고, 라벨이 입력 영역의 상단에 붙게 됩니다.
isDense: isDense 속성은 입력 필드 주위의 여백을 줄여줍니다. 이 속성을 true로 설정하면 필드의 높이가 줄어들고, 필드와 라벨 사이의 간격이 작아집니다.
contentPadding: 입력 필드의 내용과 입력 필드의 경계 사이의 여백을 설정합니다. 이 속성을 사용하면 텍스트가 텍스트 필드의 경계와 가까이 붙지 않도록 할 수 있습니다.
prefix: 필드 내부의 가장 왼쪽에 표시되는 Widget입니다. 텍스트가 아닌 경우 icon 또는 prefixIcon을 사용하는 것이 좋습니다.
prefixIcon: 필드 왼쪽에 표시되는 아이콘입니다. 사용자가 입력한 텍스트의 왼쪽에 표시됩니다.
suffix: 필드 내부의 가장 오른쪽에 표시되는 Widget입니다. 텍스트가 아닌 경우 icon 또는 suffixIcon을 사용하는 것이 좋습니다.
suffixIcon: 필드 오른쪽에 표시되는 아이콘입니다. 사용자가 입력한 텍스트의 오른쪽에 표시됩니다.
counter: 폼 필드 하단에 표시되는 텍스트 개수 카운터입니다.
counterText: counter에 표시될 문자열입니다.
각종 텍스트들을 모두 넣으면 이렇게 된다
filled: 폼 필드 배경에 색상을 적용할지 여부입니다.
fillColor: 폼 필드 배경 색상입니다.
focusColor: 폼 필드가 포커스를 받을 때 적용되는 색상입니다.
hoverColor: 마우스가 폼 필드 위에 올라가 있을 때 적용되는 색상입니다.
focusedBorder: 폼 필드에 포커스가 있을 때 적용되는 테두리입니다.
enabled: 이 속성이 false 인 경우 입력 필드가 비활성화되어helperText,errorText, and counterText가 보여지지 않고, 나머지 시각적인 요소들의 opacity가 낮아집니다.
enabledBorder: 폼 필드가 활성화되어 있을 때 적용되는 테두리입니다.
border: 폼 필드의 기본 테두리입니다.
disabledBorder: 폼 필드가 비활성화되어 있을 때 적용되는 테두리입니다.
errorBorder: 입력에 오류가 있을 때 표시할 테두리입니다. 기본적으로 빨간색 밑줄입니다.
focusBorder: 입력이 현재 포커스되었을 때 표시할 테두리입니다. 기본적으로 이것은 선이 더 두꺼운 파란색 밑줄입니다.
focusErrorBorder: 입력에 오류가 있고 현재 포커스가 있을 때 표시할 테두리입니다. 기본적으로 이것은 선이 더 두꺼운 빨간색 밑줄입니다.
Border / EnabledBorder / FocusedBorder
이 세 가지도 매번 헷갈리는 부분..
우선 Border는 general case인 경우에 사용. 이 속성을 사용하면 상태에 상관없이 디폴트 값처럼 적용됨! 대신 다른 속성들이 모두 추가되어있으면 무시되는 것 같다.
EnabledBorder는 필드를 클릭하거나 사용하고 있지 않는 비활성화 상태일 때 사용되는 속성이다. 이 상태에서 필드를 누르면 FocusedBorder가 사용된다.
좋은 정리 글도 발견
https://medium.com/flutter-community/a-visual-guide-to-input-decorations-for-flutter-textfield-706cf1877e25
