Flutter TextFormFields 사용 시 체크사항

Flutter에서 TextFormField는 사용자 입력을 처리하는 데 중요한 역할을 한다. 하지만 이를 잘못 설정하면 오히려 사용자 경험이 저하되거나 앱의 전환율에 부정적인 영향을 미칠 수 있다. 이번 블로그에서는 TextFormField를 사용할 때 흔히 저지르는 실수와 이를 해결하는 방법을 다루기로 한다.

 

1. textInputAction을 설정하지 않음

문제: 사용자가 가상 키보드의 "다음" 버튼을 눌렀을 때 다음 필드로 포커스가 이동하지 않음

해결: textInputAction 속성을 설정하여 키보드 동작을 제어

TextFormField(
  decoration: const InputDecoration(labelText: 'Field 1'),
  textInputAction: TextInputAction.next, // 다음 필드로 포커스 이동
)

참고)

• TextInputAction.next: 다음 필드로 이동
• TextInputAction.done: 키보드 닫기 및 onFieldSubmitted 호출
• 플랫폼별로 지원되는 추가 액션: (예: iOS의 continueAction, Android의 none)

 

2. 제출 액션(onFieldSubmitted)을 구현하지 않음

문제: 마지막 입력 필드에서 "완료" 버튼을 눌렀을 때 아무 동작도 하지 않음

해결: onFieldSubmitted 콜백을 사용해 동작을 정의

TextFormField(
  decoration: const InputDecoration(labelText: 'Field 3'),
  onFieldSubmitted: (_) {
    startLoading(); // 완료 시 동작
  },
)

 

3. 적절한 입력 타입(keyboardType)을 사용하지 않음

문제: 이메일, 전화번호 등 특정 데이터를 입력할 때 부적절한 키보드가 표시됨

해결 방법: keyboardType 속성을 설정하여 적절한 키보드를 표시

TextFormField(
  keyboardType: TextInputType.emailAddress, // 이메일용 키보드
  decoration: const InputDecoration(labelText: 'Email'),
)

 

참고로 Flutter는 아직 키보드 언어 힌트를 완벽히 지원하지는 않는다.

 

4. 텍스트 대소문자 설정(TextCapitalization)을 사용하지 않음

문제: 이름, 제목 등에서 대소문자 규칙이 지켜지지 않음

해결: textCapitalization 속성을 사용하여 대소문자를 제어

TextFormField(
  textCapitalization: TextCapitalization.words, // 각 단어의 첫 글자를 대문자로
  decoration: const InputDecoration(labelText: 'Name'),
)

옵션)

• TextCapitalization.none: 모든 텍스트를 소문자로 입력
• TextCapitalization.sentences: 문장의 첫 글자를 대문자로
• TextCapitalization.words: 각 단어의 첫 글자를 대문자로

 

5. 입력 형식 지정(TextInputFormatter)을 활용하지 않음

문제: 입력값이 특정 형식에 맞지 않음(예: 카드 번호, 라이선스 키 등)

해결: inputFormatters를 사용해 입력값을 필터링하거나 포맷팅

TextFormField(
  inputFormatters: [FilteringTextInputFormatter.deny(RegExp(r'[^\w\s]'))], // 특수 문자 금지
  decoration: const InputDecoration(labelText: 'Username'),
)

 

6. 자동 완성 힌트(autofillHints)와 그룹 사용하지 않음

문제: 사용자가 자주 입력하는 정보를 다시 입력해야 함(예: 이메일, 비밀번호)

해결:

1) autofillHints를 설정하여 자동 완성을 활성화

TextFormField(
  decoration: const InputDecoration(labelText: 'Email'),
  autofillHints: const [AutofillHints.email], // 자동 완성 힌트 추가
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
)

 

2) 여러 필드를 하나의 자동 완성 그룹으로 묶는다.

Form(
  child: AutofillGroup(
    child: Column(
      children: [
        TextFormField(
          autofillHints: const [AutofillHints.email],
          keyboardType: TextInputType.emailAddress,
        ),
        TextFormField(
          autofillHints: const [AutofillHints.password],
          obscureText: true,
        ),
      ],
    ),
  ),
)

 

최종 정리

1. 적절한 키보드 동작(textInputAction)과 제출 콜백(onFieldSubmitted) 구현

2. 입력 타입(keyboardType)과 대소문자 설정(textCapitalization) 활용

3. 입력값 형식 지정(inputFormatters)으로 유효성 검사 간소화

4. 자동 완성 힌트와 그룹으로 사용자 편의성 극대화

 

 

 

아래 링크의 포스팅을 참고하여 정리한 내용입니다. 원문을 확인하고 싶으시면 아래 링크를 확인해주세요.

출처 - https://medium.com/@pomis172/common-mistakes-with-textformfields-in-flutter-8adc8af1a9af