[Flutter] Focus widget

문제인식

모바일 앱의 다양한 입력필드를 보면 입력 필드에 포커스가 맞춰져 있는 동안 입력 필드 내 특정 아이콘이나 버튼, 텍스트가 활성화 되는 경우가 상당히 많다.

나 역시 플러터의 TextFormField위젯을 통해 포커스를 가지고 있는 동안 suffix버튼을 보여주려는 방법을 찾아보았지만 TextFormField 위젯 하나만 가지고는 이러한 기능을 구현할 수 없었다.
(내가 모르는 어떤 프로퍼티가 있을 수도 있지만...)

해결

이를 해결하기 위해 방법을 찾던 중 StackOverFlow에서 Focus위젯을 활용하라는 글을 보게되었고, Focus위젯을 통해 원하는 기능을 구현할 수 있었다.

코드

bool suffixState = false;

Focus(
  onFocusChanged: (bool hasFocus) => setState({
    suffixState = hasFocus;
  }),
  child: TextFormField(
    decoration: InputDecoration(
      suffix: Visible(
        visible: suffixState,
        child: IconButton(
          onPressed: () => {},
          icon: Icon(Icons.delete),
      ),
    ),
  ),
),