如何在颤动中模糊屏幕的下半部分

Question

试图模糊屏幕的下半部分，因为没有指导或帮助。

要求：-

我不想在背景过滤器子容器中提供特定的宽度或高度。

已经尝试过的：

Stack(
      fit: StackFit.expand,
      children: [
        Image.asset("assets/images/authpage.jpg",
            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),
              ),
            ),
          ),
        ),
    
      ],
    );

还尝试了着色器蒙版，但它会填充颜色而不是模糊部分。

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

Answer 1

我试过了，但不是最好的

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(
                      "https://images.unsplash.com/photo-1537734796389-e1fc293cf856?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=632&q=80",
                    ))),
            // color: Colors.blue,
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
                child: Container(
                  // the size where the blurring starts
                  height: MediaQuery.of(context).size.height * 0.4,
                  color: Colors.transparent,
                ),
              ),
            ),
          ),
          Positioned(child: Text("data"))
        ],
      ),
    );
  }
}