Flutter自定义ProductivityButton按下时无法更改颜色如何解决

根据两种常见的按钮交互需求，可选择对应实现方式：

1. 按住按钮时临时变色，松开恢复默认 #

这是Material设计体系自带的按压交互，无需手动管理状态，只需给自定义按钮补充按压态相关配置即可。修改ProductivityButton代码如下：

class ProductivityButton extends StatelessWidget {
  final Color color;
  /// 按压状态下显示的颜色
  final Color pressedColor;
  final String text;
  final double size;
  final VoidCallback onPressed;

  const ProductivityButton({
    Key? key,
    required this.color,
    // 可自定义默认按压色，比默认色稍深即可
    this.pressedColor = const Color.fromARGB(255, 0, 122, 195),
    required this.text,
    this.size = 0,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      onPressed: onPressed,
      child: Text(text, style: const TextStyle(color: Colors.white)),
      color: color,
      // 绑定按压态颜色
      pressedColor: pressedColor,
      // 可选：配置水波纹、高亮效果
      splashColor: Colors.white.withOpacity(0.2),
      highlightElevation: 0,
      minWidth: size,
    );
  }
}

如果需要单独给某个按钮设置特殊按压色，调用时传入pressedColor参数即可，不传则使用组件默认的按压色。

2. 点击后持久切换颜色（激活/未激活状态切换） #

这种场景需要记录按钮的激活状态，有两种实现路径：

父组件管理状态（推荐） #

适合按钮状态和业务逻辑强绑定的场景（比如你这里按钮触发计时器逻辑，按钮状态可以直接和计时器工作状态同步），要求父组件为StatefulWidget。
不需要修改原有ProductivityButton组件代码，只需要调整父组件的调用逻辑：

// 在父组件的State类中声明按钮状态
bool _isWorkModeActive = false;

// 组件构建部分的按钮代码
Expanded(
  child: ProductivityButton(
    // 根据状态动态传入对应颜色
    color: _isWorkModeActive
        ? const Color.fromARGB(255, 255, 110, 64) // 激活态颜色
        : const Color.fromARGB(255, 0, 162, 255), // 默认态颜色
    text: 'Work',
    onPressed: () {
      // 点击时更新状态
      setState(() {
        _isWorkModeActive = !_isWorkModeActive;
      });
      timer.startWork();
    }
  ),
),
Padding(
  padding: EdgeInsets.all(defaultPadding),
),

组件内部自管理状态 #

如果按钮是通用独立组件，不需要和外部业务状态绑定，可以将ProductivityButton改为StatefulWidget，内部维护激活状态：

class ProductivityButton extends StatefulWidget {
  /// 默认未激活状态颜色
  final Color defaultColor;
  /// 激活状态颜色
  final Color activeColor;
  final String text;
  final double size;
  final VoidCallback onPressed;

  const ProductivityButton({
    Key? key,
    required this.defaultColor,
    required this.activeColor,
    required this.text,
    this.size = 0,
    required this.onPressed,
  }) : super(key: key);

  @override
  State<ProductivityButton> createState() => _ProductivityButtonState();
}

class _ProductivityButtonState extends State<ProductivityButton> {
  bool _isActive = false;

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      onPressed: () {
        // 内部更新激活状态
        setState(() {
          _isActive = !_isActive;
        });
        // 执行外部传入的点击逻辑
        widget.onPressed();
      },
      child: Text(widget.text, style: const TextStyle(color: Colors.white)),
      color: _isActive ? widget.activeColor : widget.defaultColor,
      pressedColor: _isActive 
          ? widget.activeColor.withOpacity(0.7) 
          : widget.defaultColor.withOpacity(0.7),
      minWidth: widget.size,
    );
  }
}

调用时传入两种状态的颜色即可：

ProductivityButton(
  defaultColor: const Color.fromARGB(255, 0, 162, 255),
  activeColor: const Color.fromARGB(255, 255, 110, 64),
  text: 'Work',
  onPressed: () => timer.startWork()
)

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