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

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

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