Im trying to apply the blurring effect using the BackdropFilter only on the Drawer , and leave the other screen areas(Scafold , not really sure about the name) as its.
i want to remove the blurring effect on the yellow highlted area, i have spent lots of hours but still got stuck on it.
here is my code for the drawer:
@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),
),
)
],
),
],
),
);}
is the only solution is to make a custom controller for the Drawer? i just dont want to do it
So just in case someone came across this scenario, I solved mine by wrapping the Stack of the menu with a ClipPath widget, and the blue went away, how was this possible i dont know, but it did the job :) .