Flutter中使用Riverpod时suffixIcon不生效如何解决？

你的代码存在两个核心问题导致图标无法随状态更新：

1. 未监听状态变化：使用ref.read(mask.notifier).state仅会一次性读取状态值，不会监听后续状态变更，因此状态切换后UI不会自动重建。
2. 密码可见性未绑定状态：obscureText固定为true，即使状态切换，密码显示状态也不会同步变化。

另外状态更新的写法可以简化，避免重复读取notifier实例。

修正后的完整代码：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

final mask = StateProvider<bool>((ref) => false);

class TextFieldPassword extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 用watch监听状态，状态更新时自动触发UI重建
    final isMasked = ref.watch(mask);
    
    return Container(
      margin: const EdgeInsets.only(bottom: 10),
      child: TextFormField(
        style: const TextStyle(fontSize: 13),
        // 将密码可见性与状态绑定
        obscureText: isMasked,
        decoration: InputDecoration(
          labelText: "password",
          suffixIcon: IconButton(
            // 根据监听的状态切换图标
            icon: Icon(
              isMasked ? FontAwesomeIcons.solidEyeSlash : FontAwesomeIcons.solidEye,
            ),
            onPressed: () {
              // 简化状态更新逻辑，直接取反当前状态
              ref.read(mask.notifier).state = !isMasked;
            },
          ),
          labelStyle: const TextStyle(
            fontSize: 15,
            color: Color.fromARGB(255, 219, 219, 219),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(2),
            borderSide: const BorderSide(
              color: Color.fromARGB(255, 219, 219, 219),
              width: 1.0,
            ),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(2),
            borderSide: const BorderSide(
              color: Color.fromARGB(255, 219, 219, 219),
              width: 1.0,
            ),
          ),
        ),
      ),
    );
  }
}

关键修改说明：

• 替换ref.read为ref.watch监听状态，确保状态变更时UI自动重建。
• 将obscureText与isMasked绑定，实现图标切换与密码可见性同步。
• 简化状态更新逻辑，直接通过state = !isMasked完成取反，避免冗余操作。

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