Flutter中如何调整widget的显示亮度？

Flutter 原生就支持和 CSS filter: brightness() 等效的亮度调整能力，不需要引入第三方库，直接就能实现按钮hover、点击态的明暗交互效果。

基础实现：ColorFiltered 组件 #

用官方自带的 ColorFiltered 组件给子组件叠加颜色矩阵滤镜，就能精准复现CSS的brightness效果，参数逻辑和CSS完全对齐：

• 参数大于1：组件整体变亮，适合hover高亮场景
• 参数小于1（大于0）：组件整体变暗，适合按压反馈场景

单效果代码对照 #

1. 提亮效果（对应CSS filter: brightness(1.1)）

// 直接传入和CSS一致的亮度值即可
const brightnessValue = 1.1;
ColorFiltered(
  colorFilter: ColorFilter.matrix(<double>[
    brightnessValue, 0, 0, 0, 0,
    0, brightnessValue, 0, 0, 0,
    0, 0, brightnessValue, 0, 0,
    0, 0, 0, 1, 0,
  ]),
  child: // 传入需要调整亮度的任意组件
)

2. 变暗效果（对应CSS filter: brightness(0.9)）
   只需要把上面代码里的brightnessValue改成0.9即可，不会出现偏色问题，效果和CSS实现完全一致。

实战示例：带亮度反馈的交互按钮 #

结合状态监听，就能快速实现和前端CSS逻辑一致的按钮交互效果：

class BrightnessAdjustButton extends StatefulWidget {
  final Widget child;
  final VoidCallback? onTap;
  const BrightnessAdjustButton({super.key, required this.child, this.onTap});

  @override
  State<BrightnessAdjustButton> createState() => _BrightnessAdjustButtonState();
}

class _BrightnessAdjustButtonState extends State<BrightnessAdjustButton> {
  bool _isHover = false;
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    double brightness = 1;
    if (_isPressed) {
      brightness = 0.9; // 按压时变暗
    } else if (_isHover) {
      brightness = 1.1; // 鼠标悬浮时变亮
    }

    return GestureDetector(
      onTapDown: (_) => setState(() => _isPressed = true),
      onTapUp: (_) => setState(() => _isPressed = false),
      onTapCancel: () => setState(() => _isPressed = false),
      onTap: widget.onTap,
      child: MouseRegion(
        onEnter: (_) => setState(() => _isHover = true),
        onExit: (_) => setState(() {
          _isHover = false;
          _isPressed = false;
        }),
        child: ColorFiltered(
          colorFilter: ColorFilter.matrix(<double>[
            brightness, 0, 0, 0, 0,
            0, brightness, 0, 0, 0,
            0, 0, brightness, 0, 0,
            0, 0, 0, 1, 0,
          ]),
          child: widget.child,
        ),
      ),
    );
  }
}

使用提示：亮度参数建议控制在0.8~1.2区间内，参数低于0会显示纯黑，参数过高会导致组件过曝发白，影响视觉体验。

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