Flutter：IconButton点击后颜色不更新问题求助

这问题我之前也碰到过，大概率是两个小细节出错导致的，帮你拆解修复一下：

1. 先修正变量拼写错误 #

你在onPressed回调里写错了变量名：showPaswswordIconColor多了一个s，正确的应该是showPasswordIconColor。这个拼写失误会让你实际修改的是一个未定义的临时变量，而非你原本声明的那个绑定到UI的变量——所以你打印看到值变了，但界面用的变量根本没被修改。

2. 确保Widget在build方法内初始化 #

如果你的passwordField是在build方法外面定义的，那哪怕调用setState，这个Widget也不会重新构建，因为它脱离了Flutter的Widget树重建流程。必须把passwordField的定义移到build方法内部，这样每次setState触发后，build重新执行，Widget才会用最新的变量值重新创建。

修复后的完整代码示例 #

@override
Widget build(BuildContext context) {
  // 将passwordField移到build方法内部，确保每次setState都能重建
  Widget passwordField = AppTextFormField(
    obscureText: !_showPassword,
    decoration: InputDecoration(
      hintText: "Password",
      border: OutlineInputBorder(),
      suffixIcon: IconButton(
        icon: Icon(
          Icons.remove_red_eye,
          color: showPasswordIconColor,
        ),
        onPressed: () {
          setState(() {
            _showPassword = !_showPassword;
            // 修复拼写错误：showPaswswordIconColor → showPasswordIconColor
            if (showPasswordIconColor == Colors.grey) {
              showPasswordIconColor = buttonColor;
            } else {
              showPasswordIconColor = Colors.grey;
            }
            print(showPasswordIconColor);
          });
        },
      ),
    ),
  );

  return Scaffold(
    // 其他页面布局代码...
    body: passwordField,
  );
}

额外小优化 #

颜色切换逻辑可以用三元运算符简化，让代码更清爽：

showPasswordIconColor = showPasswordIconColor == Colors.grey ? buttonColor : Colors.grey;

这样修改后，点击IconButton时颜色应该就能正常切换了。

内容的提问来源于stack exchange，提问作者Egemen Baki