flutter - how to add a tiled image to my BoxDecoration-CodePudding

I have created a working alpha slider control. The slider alpha gradient works fine.

Now, I want to create a checkered background for my slider. I want the slider to have a checkered background to look like this (please note the rounded corners of the checker):

The slider's size is variable so i think i need to tile a small checker pattern PNG.

This is my current code:

      gradient = LinearGradient(
          colors: colors,
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter);

    Widget content = Positioned(
      left: left,
      top: top,
      child: Container(
        width: barWidth,
        height: barHeight,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black),
            borderRadius:
                BorderRadius.all(Radius.circular(10)),
            gradient: gradient),
            
      ),
    );

I think i need to use "ImageShader" but I couldn't get it to work.

CodePudding user response：

Create a small portion of your checkered pattern (2 squares wide) and add a repeating image to the BoxDecoration.

Widget content = Positioned(
  left: left,
  top: top,
  child: Container(
    width: barWidth,
    height: barHeight,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.black),
      borderRadius: BorderRadius.all(Radius.circular(10)),
      gradient: gradient,
      image: DecorationImage(
        repeat: ImageRepeat.repeatX,
        image: AssetImage('asset_name'),
      ),
    ),
  ),
);

CodePudding user response：

You can use a PNG of your background in a stack with your current layout.

CodePudding user response：

using Stack:

  gradient = LinearGradient(
      colors: colors,
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter);

Widget content = Positioned(
  left: left,
  top: top,
  child: Stack(
    children: [
  Container(//same width & height & corderRadius
    child: Image.asset(// with repeat: ImageRepeat.repeatX,
  ),
  Container(
    width: barWidth,
    height: barHeight,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.black),
        borderRadius:
            BorderRadius.all(Radius.circular(10)),
        gradient: gradient),
        
  ),
    ],
);