Search code examples
flutterflutter-web

Why is Shader Mask not working on flutter web?

Below is the code I'm trying :

ShaderMask(
          shaderCallback: (rect) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.black, Colors.transparent],
            ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
          },
          blendMode: BlendMode.dstIn,
          child: Image.asset('assets/image.jpg'),
        ),

I have already used shader masks before so I knew it will work on android IOS. Below is the result (correct one) :

enter image description here

But this is the result I get when I try the same code on flutter web :

enter image description here

Am I doing something wrong or is this an issue from the side of Flutter ? And it is a Flutter web side issue, the is there a workaround for this ? I want to achieve the above android result. (Image Fading from below).

Solution

  • Check if you are using the latest version of Flutter or not which is 2.21. if not then the use the command below

    flutter upgrade

    In Flutter web updates, they have made improvements web. They have added support for shader masks and computeLineMetrics, addressing the parity gaps between Flutter web and mobile apps. For example, you can now use opacity masks to perform fade-out transitions with shader masks, and use computeLineMetrics as they would for mobile apps