I have a tab bar, and i wanted a backdrop filter blur on it.
Which i did using the following code:

    ClipRRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(0, 8, 0, 20),

but now i want to have an opacity filter on the entire widget so the blur effect doesn’t seem abrupt. For reference:

i tried the code suggested here: https://github.com/flutter/flutter/issues/48212#issuecomment-592166594

as

     ClipRRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
                    child: ShaderMask(
                      shaderCallback: (rect) {
                        return LinearGradient(
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                            colors: [Colors.black, Colors.black.withOpacity(0)],
                            stops: const [0.4, 0.75]).createShader(rect);
                      },
                      blendMode: BlendMode.dstOut,
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 8, 0, 20),

but this still doesn’t give the desired result, instead:

any ideas how i could achieve this effect in flutter, or is it not possible?