1

I have searched pretty long but sadly can not find a related answer. How can I change the background color of my active route-item? See on the picture or the current Audible or Clock App on the iPhone. I'm using CupertinoTabBar but can´t find any solution to this problem. I just want a rounded Square behind my active item.

Audible App - Bottom Navigation Bar

followed my current Navbar Code

CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
            iconSize: 30,
            activeColor: SymeColorPurple,
            backgroundColor: Colors.white,
            inactiveColor: Colors.black12,
            items: [
              BottomNavigationBarItem(
                icon: Padding(
                  padding: const EdgeInsets.only(top: 6.0),
                  child: Icon(
                    Icons.settings
                  ),
                ),
                title: Text(
                  "Inventory",
                  style: const TextStyle(fontWeight: FontWeight.w600),
                ),
              ),
              BottomNavigationBarItem(
                icon: Padding(
                  child: Icon(Icons.home),
                  padding: const EdgeInsets.only(top: 6.0),
                ),
                title: Text(
                  "Home",
                  style: const TextStyle(fontWeight: FontWeight.w600),
                ),
              ),
              BottomNavigationBarItem(
                icon: Padding(
                  child: Icon(
                    Icons.camera_alt
                  ),
                  padding: const EdgeInsets.only(top: 6.0),
                ),
                title: Text(
                  "Camera",
                  style: const TextStyle(fontWeight: FontWeight.w600),
                ),
              ),
            ],
          ),
          tabBuilder: (context, index) {
            switch (index) {
              case 0:
                return InventoryPage();
                break;
              case 1:
                return HomeView();
                break;
              case 2:
                return CameraPage();
                break;
              default:
                return HomeView();
                break;
            }
          }),
Adschi
  • 11
  • 1
  • Sorry to say this but yah Cupertino will not have that kind of functionality in first place just think about it ios cupertino designs are backgrounds needs to be same while icon and text color will be different also there's no property in the class https://api.flutter.dev/flutter/cupertino/CupertinoTabBar-class.html https://api.flutter.dev/flutter/widgets/BottomNavigationBarItem-class.html So no you can't be able to specify property but you can be able to use stack and have work arounds. – Parth Dave May 26 '20 at 16:58
  • oh ok didn't know that.. so what should I use instead? – Adschi May 26 '20 at 19:20
  • You can create you own custom bottom bar to achieve that. With a Row space even you can easily pass your items having equal amount of width, when selected, change the state and keep a background color. – Mariano Zorrilla May 26 '20 at 22:48
  • Maybe this will help; https://stackoverflow.com/questions/49029966/how-to-change-bottomnavigationbaritem-icon-when-selected-flutter – Yusuf Emre Tekin Apr 21 '22 at 20:36

0 Answers0