如何仅在抽屉上应用模糊的BackdropFilter？

Question

我试图仅在Drawer上使用BackdropFilter来应用模糊效果，而将其他屏幕区域（Scafold，不确定名称）保留为原样。

我想消除黄色高光区域上的模糊效果，我花了很多时间，但仍然卡在上面。

这是我的抽屉代码：

 @override
 Widget build(BuildContext context) {
return Drawer(
  child: Stack(
    //  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.dstATop)
    children: <Widget>[
      Image.network(
        userPicUrl,
        height: MediaQuery.of(context).size.height,
        fit: BoxFit.cover,
      ),
      Container(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 16.0, sigmaY: 16.0),
          child: Container(
            decoration: BoxDecoration(
                color: Colors.lightBlueAccent.withOpacity(0.5)),
          ),
        ),
      ),
      Positioned(
        left: 150,
        top: 100,
        height: 100.0,
        width: 100.0,
        child: InkWell(
          onTap: () async {
            imageFile =
                await ImagePicker.pickImage(source: ImageSource.gallery);
            setState(() {});
          },
          splashColor: Colors.lightGreenAccent,
          highlightColor: Colors.pinkAccent.withOpacity(0.5),
          child: Icon(
            Icons.image,
            size: 24,
            color: Colors.transparent,
          ),
        ),
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 12.0),
            child: SafeArea(
              child: ClipRRect(
                child: Container(
                  height: 120,
                  width: 120,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(64),
                    border: Border(
                        right: BorderSide(width: 2, color: Colors.white),
                        left: BorderSide(width: 2, color: Colors.white),
                        top: BorderSide(width: 2, color: Colors.white),
                        bottom: BorderSide(width: 2, color: Colors.white)),
                    image: DecorationImage(
                        image: NetworkImage(userPicUrl),
                        fit: BoxFit.fitHeight),
                  ),
                ),
              ),
            ),
          ),
          Text(
            "ژینەر حەیدەر تەها",
            textAlign: TextAlign.center,
            maxLines: 2,
            style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.w600),
          ),
          Text(
            "C6-1",
            style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.w900),
          ),
          Spacer(),
          Column(
            children: drawerItems.map((item) {
              return ListTile(
                leading: Icon(
                  item.icon,
                  size: 28,
                  color: Colors.white,
                ),
                title: Text(
                  item.title,
                  style: TextStyle(fontSize: 16, color: Colors.white),
                ),
              );
            }).toList(),
          ),
          Spacer(),
          ListTile(
            leading: Icon(
              Icons.exit_to_app,
              size: 28,
              color: Colors.white,
            ),
            title: Text(
              "Sign Out",
              style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                  fontWeight: FontWeight.w400),
            ),
          )
        ],
      ),
    ],
  ),
);}

唯一的解决方案是为抽屉创建自定义控制器？我只是不想这样做

Answer 1

您可以在下面复制粘贴运行完整代码您可以使用SizedBox在我的测试中，如果[C0

= 250，仍然会使整个屏幕模糊。因此在我的演示中width为249。您可以根据情况测试width

代码段

width
工作演示
SizedBox(
    width: 249,
    child: Drawer(
完整代码

Answer 2

所以以防万一有人遇到这种情况，我用ClipPath小部件包裹菜单的堆栈来解决了我的问题，蓝色消失了，我不知道这怎么可能，但是它确实完成了工作:)。] >