First button not shown with bottomNavigationBar using a TabSelector

[Dev-Owl]

Hi,

First, thanks for the nice plugin from my point of view it's a good addition when it comes to usability and quick navigation.

I'm facing an issue that the first button in my list is hidden, it is drawn under the "bottomNavigationBar" which is in my case a TabSelecgtor widget. The image below shows the situation:

This is the code of the menu, please note the page is nested into another view using Scaffold to render the above mentioned bottom bar.

Scaffold(
        body: ListView(
          children: listItems,
        ),
        floatingActionButton: state is ProjectHomeEditDetailsState
            ? null
            : Builder(
                builder: (context) => FabCircularMenu(
                  key: fabKey,
                  ringWidth: 50,
                  alignment: Alignment(1, 1),
                  ringDiameter: min(MediaQuery.of(context).size.width,
                          MediaQuery.of(context).size.height) *
                      0.9,
                  children: <Widget>[
                   //Not shown
                    IconButton(
                        icon: Icon(Icons.delete_forever),
                        onPressed: () {},
                       ),
                    // All below are shown
                    IconButton(
                        icon: Icon(Icons.edit),
                         onPressed: () {},
                     ),
                    IconButton(
                      icon: Icon(Icons.search),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.sync),
                      onPressed: () {},
                    ),
                  ],
                ),
              ),
      );

[orachide]

Hello,

Did tou solved that?

[Dev-Owl]

If you consider adding a dummy button as a fix than yes. I did not really invest time into it as I'm just playing around with a few UI/UX concepts...

[MrCsabaToth]

Interesting. I've found this: https://stackoverflow.com/questions/57831347/scaffold-bottomnavigationbar-overlapping-body-content-how-to-prevent-it So unlike the AppBar the bottom navigation bar can overlay stuff. I'm not sure if this is the jurisdiction of the FabCircularMenu widget or not. There could be anything at the bottom.

[MrCsabaToth]

Or maybe this is about Z order. When the Circular Fab Menu is on the topLeft or topRight it also overlays with the AppBar, however in that case the button and the circular ribbon are above the AppBar. In case of the bottom navigation bar it looks like it's in a broken state: the Circular Menu open close button seems to know that the bottom nav bar is there, however the circular ribbon shouldn't flow bellow the bar. So maybe it is somehow indeed the jurisdiction of the plugin, or both?

[YDA93]

I fixed it by adding dummy widgets.

Example:

  children: [
    const SizedBox.shrink(),
    const SizedBox.shrink(),
    MainWidget(),
    const SizedBox.shrink(),
    const SizedBox.shrink(),
    MainWidget(),
    const SizedBox.shrink(),
    const SizedBox.shrink(),
  ],

[MrCsabaToth]

My PR https://github.com/marianocordoba/fab-circular-menu/pull/35 is still not merged...

[YDA93]

I noticed many packages has not recently accepted merges nor updating their pub.dev due to lack of funding I guess.