Flutter 웹 프로젝트에서 TextFormField 자동완성 이슈 해결

문제 상황

사내 어드민 페이지를 Flutter 웹으로 작업하던 중 로그인 폼에서 브라우저 자동완성이 동작하지 않는 이슈를 발견했다. Chrome에서 아이디/비밀번호 저장을 제안하지도 않고, 저장된 정보도 불러오지 못했다.

시도한 방법

처음에는 TextFormField에 autofillHints만 추가하면 될 줄 알았다.

TextFormField(
  autofillHints: [AutofillHints.username],
  decoration: InputDecoration(labelText: '아이디'),
)

하지만 이것만으로는 부족했다. Flutter 웹은 실제 HTML input 태그로 렌더링되지만, 브라우저가 form으로 인식하지 못하는 구조였다.

해결 방법

AutoFillGroup으로 TextFormField들을 감싸고, onEditingComplete 콜백을 명시적으로 설정해야 했다.

AutoFillGroup(
  child: Column(
    children: [
      TextFormField(
        autofillHints: [AutofillHints.username],
        decoration: InputDecoration(labelText: '아이디'),
        onEditingComplete: () => FocusScope.of(context).nextFocus(),
      ),
      TextFormField(
        autofillHints: [AutofillHints.password],
        obscureText: true,
        decoration: InputDecoration(labelText: '비밀번호'),
        onEditingComplete: () => _handleLogin(),
      ),
    ],
  ),
)

결과

Chrome, Edge에서 정상적으로 자동완성이 동작하는 것을 확인했다. Safari는 여전히 간헐적으로 문제가 있었지만, 주 사용 브라우저가 Chrome이라 일단 진행하기로 했다.

Flutter 웹은 아직 프로덕션에서 사용하기에 이런 디테일한 부분들이 아쉽다. 다음에는 폼 관련 기능이 많다면 React로 가는 게 나을 것 같다.