title: how to blur bottom half of the screen in flutter
body: <p><strong>trying to blur the bottom half of the screen as no guideline or help available</strong>.</p>
  <p><strong>Requirement:-</strong></p>
  <p><a href="https://i.stack.imgur.com/8RRkw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8RRkw.png" alt="enter image description here" /></a></p>
  <p>i do not want to give specific width or height in backdrop filter child container.</p>
  <p>what is already tried:</p>
  <pre><code>Stack(
        fit: StackFit.expand,
        children: [
          Image.asset(&quot;assets/images/authpage.jpg&quot;,
              height: double.infinity, width: double.infinity, fit: BoxFit.fill),
          Positioned(
            top: 500,
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.black.withOpacity(0.1),
                ),
              ),
            ),
          ),
      
        ],
      );
  </code></pre>
  <p>Also tried the shader mask but that will fill with colors and not the blur part.</p>
  <pre><code>Stack(
        fit: StackFit.expand,
        children: [
          ShaderMask(
            shaderCallback: (rect) {
              return LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Colors.white, Colors.transparent],
              ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
            },
            blendMode: BlendMode.dstIn,
            child: Image.asset(
              'assets/images/authpage.jpg',
              height: 400,
              fit: BoxFit.fill,
            ),
          ),
        ],
      );
  </code></pre>