Flutter BackdropFilter for Appbar

user_1830228 0
Viewed 2527

how can i use BackdropFilter in flutter for Appbar ? when i use that for the Appbarother widgets which they are into Scaffold blurred, not AppBar

for example:

BackdropFilter(
  filter: ImageFilter.blur(
      sigmaX: 5,
      sigmaY: 5
  ),

  child: AppBar(
      automaticallyImplyLeading: false,
      // Used for removing back button.
      elevation: 8.0,
      titleSpacing: 0.0,
      backgroundColor: theme.appMainColor,
      title: Stack(
        children: <Widget>[

        ],
      )),
),
flutter
2 Answers

After searching web for a while and trying different combinations of widgets, I finally found the solution

    appBar: PreferredSize(
      child: Container(
        child: ClipRRect(
            child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                child: Container(
                  //   width: MediaQuery.of(context).size.width,
                  //  height: MediaQuery.of(context).padding.top,
                  color: Colors.transparent,
                ))),
      ),
      preferredSize: Size(MediaQuery.of(context).size.width, 22),
    ),

Go nuts!!

user_91329300
  1. Use the flexibleSpace parameter of the AppBar.
  2. Wrap the BackDropFilter with a ClipRect to prevent the blur from getting all over the screen.
  3. Make sure to create a Container as the child of the BackDropFilter

Here is the minimal code you'll need to add to your AppBar:

flexibleSpace: ClipRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 7, sigmaY: 7),
    child: Container(
      color: Colors.transparent,
    ),
  ),
),
user_116963030
Related