Home > Blockchain >  how to create such gradient mask flutter
how to create such gradient mask flutter

Time:09-06

example

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: example 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,),
        ),

CodePudding user response:

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

enter image description here

enter image description here

  • Related