CupertinoTabBar blocks current Tab bottom part how to avoid this or is it a default behavior

Question

I change my BottomNavigatorBar to CupertinoTabBar and it does not compress the current Tab,

in other words I wouldn't be able to show some information which is at the bottom part of that current tab because CupertinoTabBar blocks it.

I don't know it is an default behavior for Cupertino style but I need to solve it. I try to wrap my pages with CupertinoTabView and/or CupertinoPageScaffold, both does not work.

Do you have any advice ?

here is my related code :

    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(currentIndex: 2, items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.explore), title: Text('Explore')),
        BottomNavigationBarItem(
            icon: Icon(Icons.card_travel), title: Text('Adventure')),
        BottomNavigationBarItem(
            icon: Icon(Icons.search), title: Text('Search')),
        BottomNavigationBarItem(
            icon: Icon(Icons.map), title: Text('Create Tour')),
        BottomNavigationBarItem(
            icon: Icon(Icons.person), title: Text('Profile')),
      ]),
      tabBuilder: (context, index) {
        switch (index) {
          case 0:
            return CupertinoTabView(
              builder: (context) => ExplorePage(),
            );
            break;
          case 1:
            return AdventurePage();
            break;
          case 2:
            return CupertinoTabView(
              builder: (context) => SearchTourPage(),
            );
            break;
          case 3:
            return BasicRouteInfoForm();
            break;
          case 4:
            return ProfilePage();
            break;
          default:
            return SearchTourPage();
        }
      },
    );

Answer 1

Just provide backgroundColor which is not translucent, i.e. has opacity of 1.0 (opacity is less than 1.0 by default):

return CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    backgroundColor: CupertinoTheme.of(context).barBackgroundColor.withOpacity(1.0),
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
 // ...

It implements the same logic as the CupertinoNavigationBar:

If translucent, the main content may slide behind it. Otherwise, the main content's top margin will be offset by its height.

The documentation is not very clear about this, probably because this is the common logic for Cupertino navigation widgets (CupertinoTabBar and CupertinoNavigationBar at least) and is considered intuitive.

Looks like this method affects positioning of the main content and the tab bar:

/// Indicates whether the tab bar is fully opaque or can have contents behind
/// it show through it.
bool opaque(BuildContext context) {
  final Color backgroundColor =
      this.backgroundColor ?? CupertinoTheme.of(context).barBackgroundColor;
  return CupertinoDynamicColor.resolve(backgroundColor, context).alpha == 0xFF;
}