Nested navigation with preservation of bottomNavigationBar

[Automat1zationPRO]

Good afternoon. I ran into a problem. I have created a bottom navigation bar

@RoutePage()
class MainBottomNavigationBarScreen extends StatefulWidget {
  final List<Widget> screens;

  const MainBottomNavigationBarScreen({Key? key, required this.screens}) : super(key: key);

  @override
  State<MainBottomNavigationBarScreen> createState() => _MainBottomNavigationBarScreenState();
}

class _MainBottomNavigationBarScreenState extends State<MainBottomNavigationBarScreen> {
  @override
  Widget build(BuildContext context) {
    return AutoTabsScaffold(
      transitionBuilder: null,
      animationDuration: Duration(milliseconds: 0),
      lazyLoad: false,
      routes: const [
        UserProfileRouteWrapper(),
        OrderListRouteWrapper(),
        CreateRouteWrapper(),
        ApplicationListRouteWrapper(),
        MessengerRouteWrapper(),
      ],
      bottomNavigationBuilder: (_, tabsRouter) {
        return Theme(
          data: ThemeData(splashColor: Colors.transparent, highlightColor: Colors.transparent),
          child: BottomNavigationBar(
            elevation: 0,
            useLegacyColorScheme: false,
            enableFeedback: false,
            type: BottomNavigationBarType.fixed,
            backgroundColor: AppColors.instance.dominantSecondaryColor4,
            currentIndex: tabsRouter.activeIndex,
            onTap: (index) {
              if (index == 2) {
                ModalBottomSheetWidget.showModalCreateBottomSheet(context: context);
              } else {
                tabsRouter.setActiveIndex(index);
              }
            },
            iconSize: 8.svw,
            selectedItemColor: AppColors.instance.brandColor,
            unselectedItemColor: AppColors.instance.opposSecondaryColor3,
            items: [
              BottomNavigationBarItem(
                label: LocaleKeys.bottomBar_profile.tr(),
                icon: Padding(
                  padding: EdgeInsets.only(bottom: AppLayout.instance.verticalElementMarginSmall),
                  child: Icon(AppIcons.user),
                ),
              ),
              BottomNavigationBarItem(
                label: LocaleKeys.send.tr(),
                icon: Padding(
                  padding: EdgeInsets.only(bottom: AppLayout.instance.verticalElementMarginSmall),
                  child: Icon(AppIcons.package),
                ),
              ),
              BottomNavigationBarItem(
                label: LocaleKeys.header_create.tr(),
                icon: Padding(
                  padding: EdgeInsets.only(bottom: AppLayout.instance.verticalElementMarginSmall),
                  child: Icon(AppIcons.plusCircle),
                ),
              ),
              BottomNavigationBarItem(
                label: LocaleKeys.to_deliver.tr(),
                icon: Padding(
                  padding: EdgeInsets.only(bottom: AppLayout.instance.verticalElementMarginSmall),
                  child: Icon(AppIcons.package),
                ),
              ),
              BottomNavigationBarItem(
                label: LocaleKeys.bottomBar_messenger.tr(),
                icon: Padding(
                  padding: EdgeInsets.only(bottom: AppLayout.instance.verticalElementMarginSmall),
                  child: Icon(AppIcons.messageCircle),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

I'm trying to merge it together with AutoRoute. Switching between tabs works correctly, but when I try to do nested navigation, everything breaks down.

@AutoRouterConfig()
class AppRouter extends _$AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          page: InitialRouteWrapper.page,
          initial: true,
        ),
        AutoRoute(page: AuthLoginRouteWrapper.page),
        AutoRoute(page: MainBottomNavigationBarRoute.page, path: '/', children: [
          AutoRoute(page: UserProfileRouteWrapper.page, initial: true),
          AutoRoute(page: OrderListRouteWrapper.page, children: [
            AutoRoute(page: OrderRouteWrapper.page),
          ]),
          AutoRoute(page: CreateRouteWrapper.page),
          AutoRoute(page: ApplicationListRouteWrapper.page),
          AutoRoute(page: MessengerRouteWrapper.page),
        ]),
        AutoRoute(page: VerificationRouteWrapper.page),
        AutoRoute(page: VerificationUserAgreementRouteWrapper.page),
        AutoRoute(page: UserProfileViewRouteWrapper.page),
        AutoRoute(page: OrderDeliveryRouteWrapper.page),
        AutoRoute(page: ApplicationRouteWrapper.page),
        AutoRoute(page: ApplicationDeliveryRouteWrapper.page),
        AutoRoute(page: MessengerChatsRouteWrapper.page),
        AutoRoute(page: ChatRouteWrapper.page),
        AutoRoute(page: SupportChatRouteWrapper.page),
        AutoRoute(page: PasswordRegistrationRouteWrapper.page),
        AutoRoute(page: PaymentRouteWrapper.page),
        AutoRoute(page: CreateOrderRouteWrapper.page),
        AutoRoute(page: CreateApplicationRouteWrapper.page),
      ];
}

Error: This usually happens when you try to navigate to a route that is inside of a nested-router E/flutter ( 2275): before adding the nested-router to the stack first E/flutter ( 2275): try navigating to MainBottomNavigationBarRoute -> OrderListRouteWrapper -> OrderRouteWrapper

I have tried all the options, but I have not found a solution on the new version of AutoRoute. I need the bottombavigationbar to be saved when opening OrderRouteWrapper. Please tell me, thank you in advance.

[Milad-Akarie]

@Automat1zationPRO what does this line exactly do? ModalBottomSheetWidget.showModalCreateBottomSheet(context: context);

[husnainasghar]

I am also getting an issue when I try to navigate to a route inside a nested route. I am simply trying to navigate to a route that does not require any parameter but still, I am getting this issue.

[Milad-Akarie]

@husnainasghar apparently the nested route or the parent of if requires a path param called taleId

[husnainasghar]

@Milad-Akarie I don't have any params in the child route. I am getting this error when I try to navigate from the route that has this taleId parameter. If there is an issue with taleId parsing, then there should be an error navigating to the parent route. This is what my routing looks like:

AutoRoute(
              path: 'tales',
              page: TalesRoute.page,
              children: [
                AutoRoute(path: 'talesPreview', page: TalePreviewListRoute.page),
                AutoRoute(
                  path: ':taleId/info',
                  page: TaleInfoRoute.page,
                  children: [
                    AutoRoute(path: 'test', page: TestRoute.page),
                  ],
                ),
              ],
            ),

I am getting the above error when I try to navigate to TestRoute/TestPage.

[Milad-Akarie]

@husnainasghar I'm not sure how I can help with this, maybe if create a small repo reproducing this?

[Adwaithnow]

I have managed to preserve bottom navbar on service_slot github repo using auto_router but this project wont use AutoTabsScaffold.If you want an alternative solution then u can try out this.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions