CODEWITHSUNDEEP
flutterdart
Mike Kokadii
Mike Kokadii

Reputation: 523

How to set BackdropFilter to Appbar and BottomNavigationBar?

I wanna set BackdropFilter to the whole screen but it sets only for body, not the AppBar and BottomNavigationBar ones. Here is the sample of my code:

Scaffold(
appbar: AppBar(
  title: 'Hello'
),
bottomNavigationBar: BottomNavigationBar(
  ///...
),  
body: Stack(
  children: [
    Conatiner( /* ... */ ),
    if (/*condition to blur */) ...[
      BackdropFilter(
        filter: ImageFilter.blur(
          sigmaX: 5,
          sigmaY: 5
        ),
        child: Container()
      ),
      Container(
        child: /* something appears above blur */
      ),  
    ]
    ]
  )
)

Is it possible to blur all element on the screen?

enter image description here

Upvotes: 0

Views: 726

Answers (1)

Jim
Jim

Reputation: 7601

Try to use OverlayEntry:

class BlurBackground {
  static void show({@required BuildContext context, @required OverlayEntry overlayEntry}) {
    overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
          top: 0,
          child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
    child: Container(color: Colors.black.withOpacity(0)),
  ),),
    });

    Overlay.of(context).insert(overlayEntry);
  }
}

OR

Wrap Scaffold & BackdropFilter in Stack:

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          appBar: AppBar(
            title: Text('TabBar Demo'),
          ),
          body: Center(
            child: GestureDetector(
              child: Text('test'),
              onTap: () {
                showTimePicker(
                  context: context,
                  helpText: "",
                  initialTime: TimeOfDay(hour: 10, minute: 47),
                  initialEntryMode: TimePickerEntryMode.input,
                  builder: (BuildContext context, Widget child) {
                    return MediaQuery(
                      data: MediaQuery.of(context).copyWith(
                        alwaysUse24HourFormat: true,
                      ),
                      child: child,
                    );
                  },
                );
              },
            ),
          ),
        ),
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: Container(color: Colors.black.withOpacity(0)),
        ),
      ],
    );
  }

Upvotes: 1

Related Questions