Flutter中如何实现TextField的密码显示与隐藏功能？

直接给你改好的完整代码，核心是通过状态管理控制密码的显示状态，添加右侧切换图标：

class PasswordTextField extends StatefulWidget {
  const PasswordTextField({super.key});

  @override
  State<PasswordTextField> createState() => _PasswordTextFieldState();
}

class _PasswordTextFieldState extends State<PasswordTextField> {
  // 初始状态为密码隐藏
  bool _isPasswordHidden = true;

  @override
  Widget build(BuildContext context) {
    return TextField(
      // 密码框建议用visiblePassword键盘类型，适配密码输入场景
      keyboardType: TextInputType.visiblePassword,
      // 绑定密码隐藏状态
      obscureText: _isPasswordHidden,
      decoration: InputDecoration(
        border: const OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
          borderSide: BorderSide.none,
        ),
        filled: true,
        hintText: "Mot de passe",
        prefixIcon: const Icon(
          Icons.lock,
          color: Color(0xfff28800),
        ),
        // 添加右侧切换图标按钮
        suffixIcon: IconButton(
          icon: Icon(
            // 根据状态切换显示图标
            _isPasswordHidden ? Icons.visibility : Icons.visibility_off,
            color: const Color(0xfff28800),
          ),
          onPressed: () {
            // 点击切换密码显示状态
            setState(() {
              _isPasswordHidden = !_isPasswordHidden;
            });
          },
        ),
      ),
    );
  }
}

关键改动说明 #

• 状态管理：用StatefulWidget维护_isPasswordHidden变量，控制密码是否隐藏。
• obscureText属性：这个属性直接决定密码是否明文显示，绑定到状态变量即可。
• suffixIcon按钮：用IconButton实现点击切换，同时根据当前状态切换显示可见/不可见图标，颜色和左侧锁图标保持一致。
• 键盘类型优化：把原来的TextInputType.emailAddress改成TextInputType.visiblePassword，更符合密码输入的交互逻辑。

内容的提问来源于stack exchange，提问作者EL AYADI FATIMAEZZAHRA