Screen bottom padding behaves weird/ wrong with both NavBarOverlap configurations

[muelleel]

Package Version (from pubspec.yaml): persistent_bottom_nav_bar_v2: ^5.0.0

Bug Description

The bottom padding of screens is wrong for Action Buttons within the screen. When setting navBarOverlap to none, floating action buttons show correctly, but ListViews have an unwanted bottom padding

Expected behavior

When NavBarOverlap is 'none' it should not append any padding to other elements like the ListView (see screenshots) When NavBarOverlap is 'full' the floating action button(or other non-listview elements) should be fully visible

Code to reproduce

return PersistentTabView(
  navBarOverlap: const NavBarOverlap.full(), // see Screenshots for behavior with "full" and "none"

  tabs: [
    PersistentTabConfig(
      screen: Scaffold(
        appBar: AppBar(
          title: Text("Test"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {  },
          child: const Icon(Icons.add),
        ),
        body: ListView.builder(
          itemCount: 15, // 0 to 14 should be visible
          itemBuilder: (context, index) => ListTile(title: Text(index.toString())),
        ),
      ),
      item: ItemConfig(
          icon: const Icon(Icons.bug_report),
          title: "Test"
      ),
    ),
  ],
  navBarBuilder: (config) => Style6BottomNavBar(
    navBarConfig: config,
    navBarDecoration: NavBarDecoration(
      border: const Border(top: BorderSide(width: 1, color: Colors.grey)),
      color: Theme.of(context).colorScheme.surface,
    ),
  ),
);

Screenshots

NavBarOverlap.full() The ListView is fully visible (0-14) but the floating navigation button has no padding

---

NavBarOverlap.none() The ListView has an unwanted bottom padding, although the floating button is correct

[muelleel]

I've noticed that wrapping elements within SafeArea seem to affect the padding. When using custom Widgets within SafeArea the unwanted padding with NavBarOverlap.none() is applied, but otherwise it is fine.

Maybe ListView is internally wrapped with SafeArea and the padding is therefore applied!? ...

[jb3rndt]

Thank you for reporting :)

TLDR: If you use NavBarOverlap.full() manually add an offset to your FAB so its not hidden If you use NavBarOverlap.none() set padding: EdgeInsets.zero on your listview.

Indeed the ListView uses MediaQuery.of(context).padding.bottom to keep the list elements from being hidden behind other elements. You can fix this for now by manually setting the padding to EdgeInsets.zero on your ListView. Look here for more information (https://api.flutter.dev/flutter/widgets/ListView-class.html): "By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property."

What is not covered by the package, is that the scaffold automatically adds a bottom padding equal to the navbar height, which is then used by the listview. I'm not sure what the best approach would be to cover this in the package, but for now follow the approach above. Regarding the FAB: you might also have to manually offset the FAB to not be hidden behind the navbar (if you use full overlap).

[muelleel]

Thank you for this quick fix!

Working now as expected.

[jb3rndt]

Hi, it should work out of the box with the newest version (5.1.0). Feel free to reopen or create a new issue if you still find problems with the new behavior