Flushbar blocks bottom navigation interaction

[thanksmister]

I ran into a little issue with Flushbar. Unlike the snackbar, when you set it to be above the navigation bar (using aroundPadding), you cannot interact with the navigation. Flushbar seems to be blocking the navigation bar interaction when floating on top.

Here is a sample of my UI and the blocked navigation bar:

Here is my Flushbar code:

flush = Flushbar(
          flushbarPosition: FlushbarPosition.BOTTOM,
          flushbarStyle: FlushbarStyle.FLOATING,
          animationDuration: Duration(milliseconds: 300),
          aroundPadding: EdgeInsets.fromLTRB(0, 0, 0, 64.0),
          showProgressIndicator: false,
          progressIndicatorBackgroundColor: Colors.grey[800],
          messageText: Text(
            "No advertisers found, try a new search using different settings.",
            style: TextStyle(color: Colors.white, fontSize: 16),
          ),
          backgroundColor: Colors.black,
          duration: null,
          leftBarIndicatorColor: Colors.green,
          isDismissible: true,
          shouldIconPulse: false,
          mainButton: FlatButton(
            onPressed: () {
              flush.dismiss();
              _navigateAndDisplaySearch(context);
            },
            child: Text(
              "Search",
              style: TextStyle(color: Colors.green),
            ),
          ),
          icon: Icon(
            Icons.location_on,
            size: 28.0,
            color: Colors.green,
          ),
        );
        flush..show(context);

I am using flushbar: ^1.7.0

I imagine that the issue is using aroundPadding to give Flushbar an offset as you would the snackbar (well it already does this when shown). I know Material design guidelines (https://material.io/design/components/snackbars.html#usage) suggest that the snackbar never hide navigation, so perhaps a feature missing is an offset setting so I can float the bar a certain distance from the top or bottom, rather than use aroundPadding.

I may also be missing a feature that does this already. Perhaps there is a trick to adding this to a different container component so it is positioned above the bottom navigation bar?

Thanks!

[AndreHaueisen]

Hi @thanksmister Indeed a nasty bug. Thanks for reporting

[AndreHaueisen]

There is no easy fix for this issue. If I push an IgnorePointer in the overlay, you can't interact with the notification. I will continue to try a solution, but for now, I suggest that you use FlushbarPosition.TOP

[thanksmister]

Hey @AndreHaueisen thanks for the update. I am afraid from the top also blocks the menu items for the same reason as the bottom nav bars are blocked. Is there a way to add an offset or distant value so that we don't have to use the aroundPadding to achieve this effect.

[AndreHaueisen]

Sorry, there isn't. Not yet at least. I actually found a solution but it makes the bottom padding unpredictable. Will continue to test in the next few days

[mannfeldt]

My workaround was to set isDismissible: false. That will remove the blocking of pointer underneath the flushbar with the obvious drawback that the flushbar is not manually dismissible.

[apoleo88]

Any update?

I don't want to cover the bottom or top menu, so this is a huge bug for my design.

Isn't it possible to make it come from the right or left side at a certain height?

Setting isDismissible: false and clicking on the menu creates weird errors.

[easazade]

My workaround was to set isDismissible: false. That will remove the blocking of pointer underneath the flushbar with the obvious drawback that the flushbar is not manually dismissible.

setting isDismissible to false will solve this problem for most of the developer.