Search code examples
flutterdartdrawer

How to apply the BackdropFilter blurring ONLY on the Drawer?


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.

Here is my output :

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


Solution

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