我需要在图像中实现着色器遮罩

Question

我正在尝试仅将ShaderMask 实现为下面容器中的背景图像，颜色为Color(0xFFFF0000) 和透明度29%，但我无法这样做，我实现的以下代码将屏蔽所有容器的元素，但我只想屏蔽下面代码中的背景图像，请指导我该怎么做？

ShaderMask
 ( shaderCallback: (rect){
                  return LinearGradient(

                      begin: Alignment.center,
                      end: Alignment.center,
                      colors: [

                        Colors.transparent,
                        Color(0xFFFF0000),

                      ]
                  ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));

                },
                blendMode: BlendMode.color,
             child: Container(
                     width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: new BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('images/background.jpg',),
                  fit: BoxFit.cover,
    ),

              )
                     child:Container()
                    )
)

Answer 1

使用堆栈和着色器小部件

class BackgroundImageExample extends StatelessWidget {
  const BackgroundImageExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        backgroudImage(),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: SafeArea(
            child: Column(
              children: [
                // your body content here
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget backgroudImage() {
    return ShaderMask(
      shaderCallback: (bounds) => LinearGradient(
        colors: [Colors.transparent, Color(0xFFFF0000)],
        begin: Alignment.center,
        end: Alignment.center,
      ).createShader(bounds),
      blendMode: BlendMode.darken,
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/background.jpg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(Colors.black45, BlendMode.darken),
          ),
        ),
      ),
    );
  }
}

Answer 2

您可以使用 Stack 小部件。然后在您的背景容器之上。最重要的是您自己的小部件。