简体   繁体   English

如何创建这样的渐变蒙版 flutter

[英]how to create such gradient mask flutter

例子

I tried to use following code, but the black part is always transparent, and with other color like pink is also not total pink, alsways with some transparent effect like this:我尝试使用以下代码,但黑色部分始终是透明的,并且与其他颜色(如粉红色)也不是完全粉红色的,总是有一些像这样的透明效果: 例子 so my goal is total pink without transparency所以我的目标是没有透明度的完全粉红色

here is the code i tried:这是我尝试过的代码:

ShaderMask(
          blendMode: BlendMode.color,
          shaderCallback: (Rect bounds) {
            return LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Colors.blue,
                  Colors.red
                ]
            ).createShader(bounds);
          },
          child: Image.asset("assets/test/portrait_katrina.png",fit: BoxFit.cover,),
        ),

Try this:尝试这个:

Container(
              foregroundDecoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.black,
                    Colors.black87,
                    Colors.transparent,
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  stops: [0, 0.1, 0.8],
                ),
              ),
              child: Image.asset(
                "assets/images/test.jpeg",
                fit: BoxFit.cover,
              ),
            )

在此处输入图像描述

在此处输入图像描述

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM