Flutter 텍스트 폼 필드에서 비밀번호를 표시/숨기는 방법은 무엇인가요?, How to show/hide password in TextFormField?

질문

현재 비밀번호는 다음과 같이 설정되어 있습니다: TextFormField

TextFormField(
  decoration: const InputDecoration(
      labelText: 'Password',
      icon: const Padding(
        padding: const EdgeInsets.only(top: 15.0),
        child: const Icon(Icons.lock),
      )),
  validator: (val) => val.length < 6 ? 'Password too short.' : null,
  onSaved: (val) => _password = val,
  obscureText: true,
);

비밀번호를 보이게 하거나 숨기는 버튼과 같은 상호작용 버튼이 필요합니다. TextFormField 내에서 할 수 있을까요? 아니면 필요한 UI를 얻기 위해 Stack 위젯을 만들어야 할까요? 그리고 obscureText true/false에 대한 조건은 어떻게 만들어야 할까요?

답변

나는 @Hemanth Raj의 솔루션을 따라 만들었지만 더 견고한 방식으로 만들었다.

먼저 bool 변수 _passwordVisible를 선언한다.

initState()에서 _passwordVisible를 false로 초기화한다.

@override
  void initState() {
    _passwordVisible = false;
  }

다음은 TextFormField 위젯이다:

TextFormField(
   keyboardType: TextInputType.text,
   controller: _userPasswordController,
   obscureText: !_passwordVisible,//이것은 텍스트를 동적으로 가리게 할 것이다
   decoration: InputDecoration(
       labelText: 'Password',
       hintText: 'Enter your password',
       // 이것이 핵심 아이디어이다
       suffixIcon: IconButton(
            icon: Icon(
              // passwordVisible 상태에 따라 아이콘을 선택한다
               _passwordVisible
               ? Icons.visibility
               : Icons.visibility_off,
               color: Theme.of(context).primaryColorDark,
               ),
            onPressed: () {
               // 상태를 업데이트한다. 즉, passwordVisible 변수의 상태를 토글한다.
               setState(() {
                   _passwordVisible = !_passwordVisible;
               });
             },
            ),
          ),
        );