CODEWITHSUNDEEP
flutterdartgradientblur
Geremia Moretti
Geremia Moretti

Reputation: 53

Gradient Blur Effect Dart

This time I wish to have a gradient blur effect over the limits of my ScrollingView. So, I have the blur effect at the right position, but I wish the effect grows slowly until the max blur. I don't want the gap between the non-blurred part and one blurred.

enter image description here

This image shows my problem. I don't want that horrible line caused by the effect. It is too evident ...

I've been looking on the internet for some solution, but none of them matches my needs. I put below the code that I'm having right now ...

return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          SingleChildScrollView(
            //fancy content
          ),
          Positioned(
            top: 0,
            child: ClipRRect(
              child: BackdropFilter(
                filter: ui.ImageFilter.blur(
                  sigmaX: 5,
                  sigmaY: 5,
                ),
                child: Container(width: width, height: height*0.15, color: Colors.transparent,)
              ),
            ),
          ),
        ],
      ),
    );

Thanks :)

Upvotes: 0

Views: 199

Answers (0)

Related Questions