How can I disable BottomNavigationBar on a specific page?

[sh4msi]

hi, How can I disable BottomNavigationBar on a specific page? (Nested Routes)

[Milad-Akarie]

@sh4msi
try doing something like this before rendering your bottom nav

bool renderNavBar = true;
 if(context.topRouteMatch.name == MyFullScreenPage.name){
   renderNavBar = false;
 }

[SelcukKomurcu]

Hey @Milad-Akarie , i have follow-up question here regarding this. I have complex nested routes tree with multiple routers inside tabsRouter. For some pages inside nested tree want to show bottom navigation and for some want to hide. To able to achieve this don't want to write every page name to function like above. Can we have option like fullScreenDialog to be defined on generated routes so i can add my state management to decide bottom navigation or not regarding that option?

[Milad-Akarie]

Hello, I've actually been working on something that can help with this, it will probably be shipped with the next release. The whole idea is being able to pass meta/extra data to the route annotation and have it passed to the generated route configs.

  AutoRoute(
   path: ':id',
   page: BookDetailsPage,
   meta: {'hideBottomNav': true},
  ),

and you check for the flag in ui like

 final hideBottomNav = context.topRouteMatch.meta['hideBottomNav'] == true;

[SelcukKomurcu]

Awesome! That's what i needed, thanks.

[Dionnie123]

@sh4msi try doing something like this before rendering your bottom nav

bool renderNavBar = true;
 if(context.topRouteMatch.name == MyFullScreenPage.name){
   renderNavBar = false;
 }

If there are multiple routes that doesn't need the bottom-navigation-bar, we can also just use an array.contains like this....

final routesNoBottomBar = [MyPage2.name,MyPage3.name,MyPage4.name]
 if( routesNoBottomBar.contains(  context.topRouteMatch.name )  ){
    renderNavBar = false;
  }

I prefer this one bacause this is more centralized rather implementing meta stuff scattered everywhere

[yevyevyev]

hello, where to put this if statement? I'm putting it inside bottomNavigationBuilder of AutoTabsScaffold and between page navigation it does not invoke this method, therefore the check is not executed.

[madatr]

Salam! Is there any progress on this?

Hello, I've actually been working on something that can help with this, it will probably be shipped with the next release. The whole idea is being able to pass meta/extra data to the route annotation and have it passed to the generated route configs.

  AutoRoute(
   path: ':id',
   page: BookDetailsPage,
   meta: {'hideBottomNav': true},
  ),

and you check for the flag in ui like

 final hideBottomNav = context.topRouteMatch.meta['hideBottomNav'] == true;

[tahaaslam1]

Hello, I've actually been working on something that can help with this, it will probably be shipped with the next release. The whole idea is being able to pass meta/extra data to the route annotation and have it passed to the generated route configs.

  AutoRoute(
   path: ':id',
   page: BookDetailsPage,
   meta: {'hideBottomNav': true},
  ),

and you check for the flag in ui like

 final hideBottomNav = context.topRouteMatch.meta['hideBottomNav'] == true;

Any progress on this?

[hussain-abbas-06228]

Hello, I've actually been working on something that can help with this, it will probably be shipped with the next release. The whole idea is being able to pass meta/extra data to the route annotation and have it passed to the generated route configs.

  AutoRoute(
   path: ':id',
   page: BookDetailsPage,
   meta: {'hideBottomNav': true},
  ),

and you check for the flag in ui like

 final hideBottomNav = context.topRouteMatch.meta['hideBottomNav'] == true;

Hi, Is there any Update on this? @Milad-Akarie

[Milad-Akarie]

İt's already done

[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