如何在Flutter中反转颜色？

Question

我有一个小部件，用于创建渐变效果：

class GradientContainer extends StatelessWidget {
  final child;

  GradientContainer({@required this.child});
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Positioned(
          left: 5,
          top: 17,
          bottom: 5,
          right: 9,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      stops: [
                    0.0,
                    1.0
                  ],
                      colors: [
                    Colors.black.withOpacity(0.0),
                    Theme.of(context).scaffoldBackgroundColor.withOpacity(0.8),
                  ])),
            ),
          )),
      child,
    ]);
  }
}

这很好用，直到用户切换到深色主题时，无法清晰地看到渐变。因此，我想做一些类似于 Theme.of(context).scaffoldBackgroundColor.invertColor().withOpacity(0.8) 的事情，这样我就可以得到正文的反转颜色，从而使渐变在任何主题下都具有良好的对比度。有人知道怎么做吗？我已经尝试在网上查找，但是我找到的所有内容都是如何在图像上应用反转滤镜。

- whatever

Answer 1

根据http://www.vb-helper.com/howto_invert_color.html网站所述：

You can invert a color by subtracting each of its red, green, and blue components from 255. In other words:

new_red   = 255 - old_red
new_green = 255 - old_green
new_blue  = 255 - old_blue

Color invert(Color color) {
  final r = 255 - color.red;
  final g = 255 - color.green;
  final b = 255 - color.blue;

  return Color.fromARGB((color.opacity * 255).round(), r, g, b);
}

void main() {
  final inverted = invert(Colors.deepOrange);
}

- eeqk

Answer 2

怎么样：

Color.fromARGB(color.alpha, 255 - color.red, 255 - color.green, 255 - color.blue);

或者作为效用函数：

Color invertColor(Color color) => Color.fromARGB(color.alpha, 255 - color.red, 255 - color.green, 255 - color.blue);

- Asaf