flutter - 如何在 Flutter 中使容器模糊？

Question

我正在使用 this package实现底部标签栏，我试图使背景具有“磨砂”外观，以便您仍然可以看到其下方的内容，但模糊。

每次我尝试展开底部选项卡时，它不仅模糊了容器，还模糊了整个屏幕。如何只模糊选项卡菜单而不是整个屏幕？

这是我的代码

class BottomNavBar extends StatelessWidget {
  const BottomNavBar({
    Key key,
    @required this.controller,
  }) : super(key: key);
 
  final BottomBarController controller;
 
  @override
  Widget build(BuildContext context) {
    return BottomExpandableAppBar(
      appBarHeight: 0,
      controller: controller,
      expandedHeight: 100,
      horizontalMargin: 10,
      bottomOffset: 0,
      expandedBackColor: Colors.transparent,
      expandedBody: Padding(
        padding: const EdgeInsets.only(left: 15.0, right: 15, top: 10),
        child: MenuDrawer(),
      ),
    );
  }
}
 
class MenuDrawer extends StatelessWidget {
  const MenuDrawer({
    Key key,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          child: Container(
        decoration: BoxDecoration(
           
            borderRadius: BorderRadius.all(Radius.circular(20))),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Card(
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                child: Icon(Icons.save, size: 45, color: Colors.black),
              ),
              elevation: 30,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
            ),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                child: Icon(Icons.save, size: 45, color: Colors.black),
              ),
              elevation: 30,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
            ),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                child: Icon(Icons.list, size: 45, color: Colors.black),
              ),
              elevation: 30,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
            ),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                child: Icon(Icons.person, size: 45, color: Colors.black),
              ),
              elevation: 30,
              color: Colors.amber,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

我遇到了同样的问题，我找到的唯一解决方案是将容器和 BackdropFilter 包装在 Clipper Widget 中:

return ClipRRect(
  borderRadius: widget.radius,
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
      child: ...,
    ),
  ),
);