Flutter black gradients are not smooth

Question

I have colored Containers with a linearGradient on them.

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

To get the colors for the gradient I brighten/darken the color on the sides:

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();
}

Every color gradient looks as intended except for black:

My first thought was that it has to to with the fact that the color gradient isn't as big for black as it is for the other colors (I can't darken black on the right side). But when I looked at the colors for the black gradient, they are 0xff1a1a1a and 0xff000000. And if I make the gradient bigger, the stripes remain in the black items, even if there are more stripes then.

Why is that and how can I avoid it?

Answer 1

Try this if its fine for your design,

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