[FLUTTER] TextInputAction.next 시 원치 않는 포커스 스킵 방법 (TextField의 suffixIcon)

 

두 개의 TextField가 있고, TextField 안에는 suffixIcon이 들어있다.

 

해당 아이콘은 TextField의 내용을 한 번에 지우기 위한 버튼으로 사용하려 한다.

 

textInputAction: TextInputAction.next,

 

그리고 편의성을 위해 textInputAction에 next 메서드를 주어 키보드의 버튼을 클릭하면 다음 TextField로 포커스를 이동시키고 싶었다.

 

next 할당 시 키보드에 해당 버튼이 생긴다. (only 안드로이드)

 

하지만 키보드의 버튼을 누르면 의도대로 다음 TextField로 포커스가 이동하지 않고, 현재 TextField의 suffixIcon으로 포커스가 이동한다.

 

 

이때,  Focus  위젯을 사용하여 포커스가 가지 않도록 할 수 있다.

 

TextField(
  textInputAction: TextInputAction.next,
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.white,
    hintText: "아이디를 입력하세요",
    suffixIcon: Focus(
      descendantsAreFocusable: false,
      child: IconButton(
        onPressed: () {},
        icon: Icon(
          Icons.clear,
        ),
      ),
    ),
  ),
),

 

suffixIcon의 포커스를 없앨 것이기 때문에 IconButton을  Focus  위젯으로 감싸주고

 

descendantsAreFocusable: false,

 

descendantsAreFocusable 속성에 false를 할당해준다.

 

번역기를 돌려보니 대략 '자손이 초점을 맞출 수 있는가'로 자식 위젯이 focus를 가질 수 없도록 설정해 주는 것이다.

 

 

 

이제 의도대로 작동한다!