我需要在图像的颤动中实现着色器蒙版

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

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

Answer 2

使用堆栈和着色器小部件

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

我需要在图像的颤动中实现着色器蒙版

I need to Implement shader mask in flutter to the image

flutter

dart

image-masking

flutter-image