FlutterFlow 기초 - #63 폼 위젯 TextField

폼 위젯 TextField위젯  사용방법

 텍스트필드(TextField)위젯은 앱에 텍스트, 숫자, 기호를 입력할 때 사용하는 위젯으로 양식 작성, 메시지 전송, 검색 등을 구현하기 위해 사용함

Properties 설정하기

1) Padding & Alignment

• TextField 전체의 Padding과 Ailgnment를 설정

2) Size

• Width : 가로 폭 사이즈 설정
• Min Lines : 최소 줄 수 설정(기본은 1줄로 구성되어 별도 설정 하지 않음)
• Max Lines : 최대 줄 수 설정(기본은 1줄로 구성되어 긴 텍스트 입력 시 가로 스크롤바를 이용하여 텍스트 확인)

3) Text Field Properties

• Initial Value : 텍스트 필드에 표시할 초기 입력값(어떤 내용을 작성해야 하는지 가이드 내용 표시)
• Theme Text Style : 텍스트 스타일 테마(선택한 테마에 따라 폰트, 크기, 사이즈, 칼라가 자동 선택 됨)
• Font Family : 폰트 설정
• Font Weight : 글자 굵기
• Font Size : 글자 크기
• Text Color : 글자 색상
• Line Height : 줄 간격
• Letter Spacing : 글자 간격
• Text Align : 글자 정렬 방식

4) Label Properties

• Label Text : 텍스트 필드 위에 레이블 표시(어떤 내용을 입력하는지 표시)
• Custom Label Style : 레이블의 글자 스타일을 커스텀 방식으로 사용
• Align Label With Hint : 텍스트 필드가 여러 줄인 경우 레이블을 텍스트 필드에 중앙에 정렬

5) Label Properties

• Hint Text : 텍스트 필드에 입력해야 하는 값의 힌트를 작성
• Custom Hint Style : 힌트의 글자 스타일을 커스텀 스타일로 적용

6) Input Decoration Properties

• Input Border Type : 텍스트 필드 주위에 테두리 추가 방식
  • Outline : 텍스트 필드 전체에 테두리 추가
  • Underline : 텍스트 필드 아래에만 테두리 추가
  • None : 테두리 추가 하지 않음
• Filled : 텍스트 필드 배경색 설정
  • Border Color : 외곽선 색상
  • Fill Color : 배경색
  • Focus Border Color : 선택 시 외곽선 색상
  • Error Border Color : 잘못 입력 시 외곽선 색상
  • Border Width : 외곽선 두께
  • Border Radius : 외곽선 모서리 라운드 처리
  • Hover Color : 텍스트 필드에 마우스를 가져가면 변경되는 색상
  • Content Padding : 텍스트와 텍스트필드 테두리 사이의 공간 설정

7) Icon Properties

• 아이콘 추가 시 아이콘 설정

8) Additional Properties

• Password Field : 비밀번호 입력 시 *으로 표시됨
• Show Clear Field Icon : 입력한 내용 한 번에 지울 수 있도록 아이콘을 추가
• Autofocus : 텍스트필드를 선택 하지 않아도 자동으로 선택되어 바로 입력할 수 있도록 설정
• Autocomplete : 자동 채우기
• Update Page On Focus Change : 텍스트필드를 선택할 때 페이지 새로고침
• Upadate Page On Text Change : 텍스트필드 값이 변경될 때마다 페이지 새로고침
• Read Only : 읽기 전용 설정
• Cusor Color : 커서 색상 설정

• Keyboard Type : 키보드 유형 설정
• Mask : 사용자가 특정 형식으로 입력하도록 설정
• Fliter : 입력할 수 있는 문자 유형을 제한 설정
• Capitalization : 사용자가 입력할 때와 텍스트가 표시될 때 텍스트의 대문자 표시 여부 설정 
  • None : 대문자 표시 안 함
  • Words : 텍스트의 각 단어의 첫 글자를 대문자로 표시
  • Sentences : 각 문장의 첫 글자를 대문자로 표시
  • Characters : 모든 문자를 대문자로 표시
• Submit Type : 제출 유형을 설정(아이콘 모양을 설정)
• Max Length : 최대 문자 길이 설정
• Max Length Enforcement : 최대 문자 길이 강제 설정
  • Not Enforced : 최대 문자를 초과해도 문자를 입력할 수 있도록 하고 초과 시 경고 표시
  • Enforced : 최대 문자 초과 시 추가 입력 내용 잘림
• Hide Max Length Counter : 최대 문자 길이가 있는 경우 입력 가능한 문자 수 표시 숨기기 설정