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;
}

Answer 2

Maybe a bug but, just add a value to the prop backgroundColor of CupertinoTabBar:

tabBar: CupertinoTabBar( backgroundColor: Theme.of(context).backgroundColor

Answer 3

Try increasing the height of your contents or add SizedBox under your content.

Answer 4

import 'package:flutter/material.dart';

import 'package:flutter/cupertino.dart';

main()=>runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyApp> {
  int currentTabIndex = 0;

  onTapped(int index) {
    setState(() {
      currentTabIndex = index;
    });
  }

  List<Widget> tabs = [
    FirstPage(),
    SecondPage(),
    ThirdPage(),
    FourthPage(),
    FifthPage(),
  ];

  @override
  Widget build(BuildContext context) {
    
      return MaterialApp(
              home: Scaffold(
                              body: CupertinoTabScaffold(
            tabBar: CupertinoTabBar(items: [
                BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.home), title: Text("Home")),
                BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.search), title: Text("Search")),
                BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.person), title: Text("User Info")),
                    BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.add), title: Text("sample Info")),
                    BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.add_circled), title: Text("sample2 Info"))
            ]),
            tabBuilder: (context, index) {
                switch (index) {
                  case 0:
                    return FirstPage();
                  case 1:
                    return SecondPage();
                  case 2:
                    return ThirdPage();
                  case 3:
                    return FourthPage();
                  case 4:
                    return FifthPage();
                  default:
                    return FirstPage();
                }
            }),
              ),
      );
    
 

  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

class FourthPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

class FifthPage extends StatefulWidget {
  @override
  _FifthPageState createState() => _FifthPageState();
}

class _FifthPageState extends State<FifthPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

check out this example maybe this can help