颤动的黑色渐变不平滑答案

【问题标题】：Flutter black gradients are not smooth颤动的黑色渐变不平滑
【发布时间】：2019-09-14 16:03:52
【问题描述】：

我有一个带有线性渐变的彩色容器。

Container(
  padding: EdgeInsets.only(left: 7.0),
  decoration: BoxDecoration(
    border: Border.all(
      width: 1,
      color: Colors.black12,
    ),
    borderRadius: BorderRadius.all(
      Radius.circular(7.0)
    ),
    boxShadow: [
      BoxShadow(
        offset: Offset(1, 3),
        blurRadius: 5.0,
        color: Colors.grey,
      )
    ],
    gradient: LinearGradient(
      colors: [
        _changeColorBrightness(widget.item.color, 0.1),
        _changeColorBrightness(widget.item.color, -0.1),
      ],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    ),
  ),
),

为了获得渐变的颜色，我将两侧的颜色变亮/变暗：

Color _changeColorBrightness(Color color, double deltaValue) {
  HSVColor hsvColor = HSVColor.fromColor(color);
  double newValue = hsvColor.value + deltaValue;
  if (newValue < 0.0) {
    newValue = 0.0;
  } else if (newValue > 1.0) {
    newValue = 1.0;
  }
  return hsvColor.withValue(newValue).toColor();
}

每个颜色渐变看起来都符合预期，除了黑色：

我的第一个想法是，黑色的颜色渐变不像其他颜色那样大（我不能在右侧使黑色变暗）。但是当我查看黑色渐变的颜色时，它们是 0xff1a1a1a 和 0xff000000。如果我使渐变变大，条纹会保留在黑色项目中，即使那时条纹更多。

为什么会这样，我该如何避免？

【问题讨论】：

无效变体是_changeColorBrightness(Color(0xff1a1a1a), 0.1), _changeColorBrightness(Color(0xff000000), -0.1),？我自己尝试使用 Android Emulator 和 IOS 以及 it is ok。你检查过不同的模拟器吗？
你在发布模式下尝试过真机吗？调试模式有时会做一些奇怪的事情。

标签： flutter

【解决方案1】：

如果它适合你的设计，试试这个，

Padding(
        padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0.0),
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),
          ),
          child: Container(
            padding: new EdgeInsets.only(top: 0.0),
            child: new Container(
                padding: new EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
                child: ListTile(
                  subtitle: Text("This is Dummy Data",style: TextStyle(
                    color: Colors.white
                  ),),
                  title: Text("Hello World",style: TextStyle(
                      color: Colors.white
                  ),),
                )),
            decoration: new BoxDecoration(
              gradient: new LinearGradient(
                  colors: [
                    Colors.black,
                    Colors.black54,
                    /*AppColours.appgradientfirstColour,
                    AppColours.appgradientsecondColour*/
                  ],
                  begin: const FractionalOffset(0.0, 0.0),
                  end: const FractionalOffset(0.5, 0.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
              borderRadius: BorderRadius.circular(12.0),
            ),
          ),
        ),
      )

【讨论】：