How to make a container blurred in Flutter?
2,505
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: ...,
),
),
);
Author by
Dzuko
Updated on December 22, 2022Comments
-
Dzuko over 1 year
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), ), ) ], ), ), ); } }
-
EdwynZN almost 4 yearsTry using BackdropFilter inside the Container (between the Container and Row) if that doesn't work maybe you would need a ClipRect like the documentation example api.flutter.dev/flutter/widgets/BackdropFilter-class.html
-