Flutter 黑色渐变不平滑

Question

我给容器上色，上面有一个 linearGradient。

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。如果我将渐变调大，条纹会保留在黑色项目中，即使有更多条纹。

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

Answer 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),
            ),
          ),
        ),
      )