How to make a container blurred in Flutter?

Question

I am using this package to implement a bottom tab bar and I am trying to make the background have a "frosted" look so that you can still see the things that are under it, but blurred.

Every time I try to expand the bottom tab, it doesn't just blur the container, it blurs the whole screen. How do I get it just the tab menu blurred instead of the whole screen?

Here is my code

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

I had the same problem and the only solution I found was to wrap the container and the BackdropFilter inside a Clipper Widget:

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

Answer 2

Remove the padding before the MenuDrawer and add it as margin inside the Container

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: ...
  )
);