如何在 Flutter 中使容器模糊?

Question

我正在使用这个包来实现底部标签栏，我试图使背景具有"磨砂"外观，以便您仍然可以看到它下面的东西，但模糊不清。

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

这是我的代码

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

我遇到了同样的问题，我找到的唯一解决方案是将容器和背景过滤器包装在 Clipper 小部件中：

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

Answer 2

删除 MenuDrawer 前面的填充，并将其作为边距添加到容器内

BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
margin: const EdgeInsets.only(left: 15.0, right: 15, top: 10), //use margin instead of padding,
clipBehavior: Clip.antiAlias, //to clip the child within the decoration (or try hardEdge too)
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20))),
child: ...
)
);