GetX Routing not working with CupertinoTabView

Question

I have a minor issue with the GetX package that I use for Flutter. When I do the default routing of flutter, CupertinoTabView works, but when I use GetX's routing, CupertinoTabView doesn't work

such as

This is my tab builder code

      tabBuilder: (BuildContext context, int index) {
    switch (index) {
      case 0:
        return CupertinoTabView(
          builder: (context) => const DashboardTodayScreen(),
        );
      //return const DashboardTodayScreen();

      default:
        return CupertinoTabView(
          builder: (context) => const DashboardContentScreen(),
        );
    }
  },

and tab builder workings good

when i use default routing code for inner page

onTap: () => Navigator.push(
              context,
              CupertinoPageRoute(
                builder: (context) => TodayMealsList(),
              ),
            ),

working very well but i use to GetX Routing like this

onTap: () => Get.toNamed('/todaymeals')

Dissapper CupertinoTabView

Where could I be doing wrong. Thanks for helping

Answer 1

I found a simple method for my problem, maybe I want to write it here in case it will be useful for other developers. The core structure of our solution is to use nested. Let me show you the CupertinoTabBar first.

CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          height: 70,
          activeColor: AppColors.white,
          backgroundColor: const Color(0xffffffff),
          items: _getDashBoardController.dashboardList
              .map(
                (element) => BottomNavigationBarItem(
                  activeIcon: Container(
                    height: 50,
                    //padding: const EdgeInsets.symmetric(vertical: 5),
                    width: 79,
                    decoration: BoxDecoration(
                        border: Border.all(
                          color: AppColors.selected,
                        ),
                        color: AppColors.selected,
                        borderRadius:
                            const BorderRadius.all(Radius.circular(6))),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Icon(
                          IconDataSolid(
                            int.parse(
                              element.callToActionText.toString(),
                            ),
                          ),
                          color: AppColors.white,
                          size: 20,
                        ),
                        Text(
                          element.title!,
                        )
                      ],
                    ),
                  ),
                  icon: Container(
                    height: 50,
                    decoration: BoxDecoration(
                        border: Border.all(
                          color: AppColors.white,
                        ),
                        borderRadius:
                            const BorderRadius.all(Radius.circular(6))),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Icon(
                          IconDataSolid(
                            int.parse(
                              element.callToActionText.toString(),
                            ),
                          ),
                          color: AppColors.info,
                          size: 20,
                        ),
                        Text(
                          element.title!,
                          style: TextStyleBase.regularcaption,
                        )
                      ],
                    ),
                  ),
                ),
              )
              .toList(),
        ),
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return Navigator(
                key: Get.nestedKey(1),
                onGenerateRoute: (settings) {
                  print(settings.name);
                  print(settings.arguments);
                  if (settings.name == '/todaymeals') {
                    return GetPageRoute(
                      page: () => CupertinoTabView(
                        builder: (context) => TodayMealsList(),
                      ),
                    );
                  } else if (settings.name == '/settings') {
                    return GetPageRoute(
                      page: () => CupertinoTabView(
                        builder: (context) =>
                            SettingsScreen(navigatorId: settings.arguments),
                      ),
                    );
                  } else {
                    return GetPageRoute(
                      page: () => CupertinoTabView(
                        builder: (context) => DashboardTodayScreen(),
                      ),
                    );
                  }
                },
              );
            case 1:
              return Navigator(
                key: Get.nestedKey(2),
                onGenerateRoute: (settings) {
                  print(settings.name);
                  print(settings.arguments);
                  if (settings.name == '/mealprogram') {
                    return GetPageRoute(
                      page: () => CupertinoTabView(
                        builder: (context) => MealProgramListScreen(),
                      ),
                    );
                  } else {
                    return GetPageRoute(
                      page: () => CupertinoTabView(
                        builder: (context) => DashboardContentScreen(),
                      ),
                    );
                  }
                },
              );
            default:
              return CupertinoTabView(
                builder: (context) => DashboardTodayScreen(),
              );
          }
        },
      )

        

First of all, we open a new stack using the Navigator widget. Then we use the key: Get.nestedKey(1) property to use this stack.

 Get.toNamed('/todayactivitiesdetail', id: 1),

The id number we give allows us to follow that stack.

I hope it was understandable.