{"id":13552866,"url":"https://github.com/maheshj01/navbar_router","last_synced_at":"2026-01-11T13:32:02.122Z","repository":{"id":37796761,"uuid":"503203924","full_name":"maheshj01/navbar_router","owner":"maheshj01","description":"A Navbar widget for advanced usecases to improve user experience and save your time.","archived":false,"fork":false,"pushed_at":"2025-07-13T01:40:29.000Z","size":43978,"stargazers_count":30,"open_issues_count":14,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-08-29T17:00:02.432Z","etag":null,"topics":["bottomnavigationbar","flutter","hacktoberfest","package","widget"],"latest_commit_sha":null,"homepage":"https://docs.maheshjamdade.com/navbar_router/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maheshj01.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-06-14T04:09:01.000Z","updated_at":"2025-07-13T01:39:49.000Z","dependencies_parsed_at":"2023-01-31T01:00:53.644Z","dependency_job_id":"eb4ebb50-3e82-42a4-9494-6176548053f7","html_url":"https://github.com/maheshj01/navbar_router","commit_stats":{"total_commits":78,"total_committers":3,"mean_commits":26.0,"dds":"0.10256410256410253","last_synced_commit":"f6ecc0131fd3f785e0f37c82c32f45737cafa31c"},"previous_names":["maheshj01/navbar_router"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/maheshj01/navbar_router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maheshj01%2Fnavbar_router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maheshj01%2Fnavbar_router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maheshj01%2Fnavbar_router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maheshj01%2Fnavbar_router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maheshj01","download_url":"https://codeload.github.com/maheshj01/navbar_router/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maheshj01%2Fnavbar_router/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273699712,"owners_count":25152286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bottomnavigationbar","flutter","hacktoberfest","package","widget"],"created_at":"2024-08-01T12:02:12.225Z","updated_at":"2026-01-11T13:32:02.092Z","avatar_url":"https://github.com/maheshj01.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"## **navbar_router v0.7.7**\n\n\u003ca href=\"https://github.com/maheshmnj/searchfield\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/platform-flutter-ff69b4.svg\" alt=\"Flutter Platform Badge\"\u003e\u003c/a\u003e\n\u003ca href=\"https://pub.dev/packages/navbar_router\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/navbar_router.svg\" alt=\"Pub\"\u003e\u003c/a\u003e\n[![codecov](https://codecov.io/gh/maheshmnj/navbar_router/graph/badge.svg?token=B28CW4KRYS)](https://codecov.io/gh/maheshmnj/navbar_router)\n[![Build](https://github.com/maheshmnj/navbar_router/actions/workflows/build.yml/badge.svg)](https://github.com/maheshmnj/navbar_router/actions/workflows/build.yml)\n\u003ca href=\"https://opensource.org/licenses/MIT\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-purple.svg\" alt=\"MIT License Badge\"\u003e\u003c/a\u003e\n\n![Floating\n  Navbar](https://github.com/maheshmnj/navbar_router/assets/31410839/7da504ae-4894-481c-a443-01a24fc61946)\n\n_Checkout our [extensive docs](https://docs.widgetmedialabs.com/navbar_router/) to learn more about this package, the inspiration behind it and how to use it._\n\n## Adding a BottomNavigationBar to your app?\n\nNavbarRouter is a complete package to handle all your BottomNavigationBar needs. It provides a simplest api to achieve the advanced features of BottomNavigationBar making the user experience of your app much better. You only need to specify the NavbarItems and the routes for each NavbarItem and NavbarRouter will take care of the rest.\n\n_Most of the features which this package provides are mainly to improve the user experience by handling the smallest things possible._\n\nSee the [demo app here](https://navbar-router.netlify.app/)\n\n## **Key Features**\n\n- Choose between different NavigationBar types.\n- Remembers navigation history of Navbar (Android).\n- Persist Navbar when pushing routes\n- Support for nested navigation.\n- Intercept back button press to handle app exits (Android).\n- Fade smoothly between NavbarDestinations\n- show different icons for selected and unselected NavbarItems.\n- Consistent API for all types of Navbar.\n- Programmatically control state of bottom navbar from any part of widget tree e.g change index, hide/show bottom navbar,push/pop routes of a specific tab etc\n- Show Snackbar messages on top of Navbar with a single line of code.\n- persist state across bottom navbar tabs.\n- Jump to base route from a deep nested route with a single tap(same as instagram).\n- Adapatable to different device Sizes.\n- Supports badges on the NavbarItems.\n\n## Supports mulitple NavbarTypes\n\nYou can choose between different NavbarTypes using the `NavbarDecoration.navbarType` property. This allows you to choose between the default `NavbarType.standard` and `NavbarType.notched` NavbarTypes.\n\n|                                            NavbarType.standard (default)                                            |                                                 NavbarType.notched                                                 |\n| :-----------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------: |\n| ![Standard Navbar](https://github.com/maheshmnj/navbar_router/assets/31410839/62d6154f-dcf5-4aa9-a819-e2c84caebad1) | ![Notched Navbar](https://github.com/maheshmnj/navbar_router/assets/31410839/5378f9cd-a6ac-4c6b-bd2a-a706e87b89eb) |\n\n|                                                 NavbarType.material3                                                 |                                                 NavbarType.floating                                                 |\n| :------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: |\n| ![Material3 Navbar](https://github.com/maheshmnj/navbar_router/assets/31410839/027adf4f-d527-4dc5-ac22-8fe321734977) | ![Floating Navbar](https://github.com/maheshmnj/navbar_router/assets/31410839/d439f3d2-1c1c-448e-bbf0-cb73b372f76d) |\n\n_Heres a [sample app](example/lib/main.dart) built using this package to see how it works._\n\n_video demo of the sample app_\n\n\u003cimg src=\"https://github.com/maheshmnj/navbar_router/assets/31410839/d7490227-34b5-4954-b43b-f4fdcffdacd3\" alt=\"navbar_route demo\" width=\"300\"/\u003e\n\nThis package will help you save atleast 50% lines of code in half the time required to implement the above features. Heres the same [sample app](https://dartpad.dev/?id=894922ccb67f5fdc4ffb652e41916fa2) without the package which requires around 800 lines of code.\n\n## **Installation**\n\nRun from the root of your flutter project.\n\n```console\n  flutter pub add navbar_router\n```\n\n_Example_\n\n```dart\nclass HomePage extends StatelessWidget {\n  HomePage({Key? key}) : super(key: key);\n\n  List\u003cNavbarItem\u003e items = [\n    NavbarItem(Icons.home_outlined, 'Home',\n        backgroundColor: mediumPurple,\n        selectedIcon: Icon(\n          Icons.home,\n          size: 26,\n        )),\n    NavbarItem(Icons.shopping_bag_outlined, 'Products',\n        backgroundColor: Colors.orange,\n        selectedIcon: Icon(\n          Icons.shopping_bag,\n          size: 26,\n        )),\n    NavbarItem(Icons.person_outline, 'Me',\n        backgroundColor: Colors.teal,\n        selectedIcon: Icon(\n          Icons.person,\n          size: 26,\n        )),\n  ];\n\n  final Map\u003cint, Map\u003cString, Widget\u003e\u003e _routes = const {\n    0: {\n      '/': HomeFeeds(),\n      FeedDetail.route: FeedDetail(),\n    },\n    1: {\n      '/': ProductList(),\n      ProductDetail.route: ProductDetail(),\n    },\n    2: {\n      '/': UserProfile(),\n      ProfileEdit.route: ProfileEdit(),\n    },\n  };\n\n  @override\n  Widget build(BuildContext context) {\n    return NavbarRouter(\n      errorBuilder: (context) {\n        return const Center(child: Text('Error 404'));\n      },\n      onBackButtonPressed: (isExiting) {\n        return isExiting;\n      },\n      destinationAnimationCurve: Curves.fastOutSlowIn,\n      destinationAnimationDuration: 600,\n      decoration:\n          NavbarDecoration(navbarType: BottomNavigationBarType.shifting),\n      destinations: [\n        for (int i = 0; i \u003c items.length; i++)\n          DestinationRouter(\n            navbarItem: items[i],\n            destinations: [\n              for (int j = 0; j \u003c _routes[i]!.keys.length; j++)\n                Destination(\n                  route: _routes[i]!.keys.elementAt(j),\n                  widget: _routes[i]!.values.elementAt(j),\n                ),\n            ],\n            initialRoute: _routes[i]!.keys.first,\n          ),\n      ],\n    );\n  }\n}\n```\n\n# Features Breakdown\n\n## Remembers NavigationBar history (for Android Devices)\n\nWhen the selected NavbarItem is at the root of the navigation stack, pressing the Back button (On Android) will by default trigger app exit.\n\nFor instance:\n\nYour app has three tabs and you navigate from Tab1 -\u003e Tab2 -\u003e Tab3\n\n- `BackButtonBehavior.exit` (default)\n  when you press Back Button (on Tab3) your app will exit\n\n- `BackButtonBehavior.rememberHistory`,\n  This will switch the navbar current index to the last selected NavbarItem (Tab 2) from the navbarHistory.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/31410839/184479993-01c85b2d-4453-4137-93b2-5242d1ed0e7e.gif\" width =\"300\"\u003e\n\nYou can read [more about this feature here.](https://github.com/maheshmnj/navbar_router/issues/9#issuecomment-1211569478)\n\n## Fading between NavbarDestinations\n\nYou can have smooth Transitions between NavbarDestinations by setting the `destinationAnimationCurve` and `destinationAnimationDuration` properties.\n\ndefaults to\n\n```dart\n  destinationAnimationCurve: Curves.fastOutSlowIn,\n  destinationAnimationDuration: 300,\n```\n\n\u003cimg width=\"300\" src=\"https://github.com/flutter/flutter/assets/31410839/90e2d176-cd62-4e0f-8b3c-6afa64c96330\"\u003e\n\n## Hide or show bottomNavigationBar\n\nYou can hide or show bottom navigationBar with a single line of code from anywhere in the widget tree. This allows you to handle useCases like scroll down to hide the navbar or hide the navbar on opening the drawer.\n\n```dart\n NavbarNotifier.hideBottomNavBar = true;\n```\n\n|                    Hide/show navbar on scroll                     |                                             Hide/show navbar on drawer open/close                                              |                                           Consistent behavior across all Navbars                                           |\n| :---------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------: |\n| ![](https://miro.medium.com/max/800/1*NaYdY1FfsPFCNBdx3wg_og.gif) | \u003cimg src=\"https://user-images.githubusercontent.com/31410839/173987446-c8c79bb0-d24c-46c1-bc4a-582508a4e187.gif\" width =\"200\"\u003e | ![ezgif com-video-to-gif](https://github.com/maheshmnj/navbar_router/assets/31410839/4e30d2a6-63c7-427c-953b-f800d1b68fad) |\n\n## Show Snackbar\n\nYou can show a snackbar on top of the navbar by using the `NavbarNotifier.showSnackBar` method.\n\n![snackbar](https://github.com/flutter/flutter/assets/31410839/b2c95c3b-45fa-474c-acee-6f48a051f8ef)\n\nNote: You will need to wrap your NavbarRouter within a builder for this to work see the [example](example/lib/main.dart) for more details.\n\n```dart\nNavbarNotifier.showSnackBar(\n  context,\n  \"This is shown on top of the Floating Action Button\",\n  /// offset from bottom of the screen\n  bottom: state.hasFloatingActionButton ? 0 : kNavbarHeight,\n);\n```\n\nAnd hide it using the `NavbarNotifier.hideSnackBar` method.\n\n```dart\nNavbarNotifier.hideSnackBar(context);\n```\n\n## Intercept BackButton press events (Android)\n\n_navbar_router_ provides a `onBackButtonPressed` callback to intercept events from android back button, giving you the ability to handle app exits so as to prevent abrupt app exits without users consent. (or you might want to implement double press back button to exit).\nThis callback method must return `true` to exit the app and false other wise.\n\n_sample code implementing double press back button to exit_\n\n```dart\nonBackButtonPressed: (isExitingApp) {\n  if (isExitingApp) {\n    newTime = DateTime.now();\n    int difference = newTime.difference(oldTime).inMilliseconds;\n    oldTime = newTime;\n    if (difference \u003c 1000) {\n      hideSnackBar();\n      return isExitingApp;\n    } else {\n      showSnackBar();\n      return false;\n    }\n  } else {\n    return isExitingApp;\n    }\n  },\n```\n\n\u003cimg src=\"https://miro.medium.com/max/600/1*NRszUNzsN-HDlDmeJP1IDQ.gif\"\u003e\n\n## Adds Support for Animated Navbar Badges\n\n\u003cimg width=\"537\" alt=\"image\" src=\"https://github.com/maheshmnj/navbar_router/assets/31410839/6d8d28fa-e30c-498e-9216-91dc9b6765ea\"\u003e\n\n![ScreenRecording2024-04-24at09 32 06-ezgif com-crop](https://github.com/maheshmnj/navbar_router/assets/31410839/d993f6cf-7f91-4f97-b453-fb4d3b18260e)\n\n```dart\nNavbarItem(Icons.home_outlined, 'Home',\n      backgroundColor: colors[0],\n      selectedIcon: const Icon(\n        Icons.home,\n        size: 26,\n      ),\n      badge: const NavbarBadge(\n        badgeText: \"11\",\n        showBadge: true,\n      )),\n```\n\n- Show or hide the badge using the `NavbarNotifier.makeBadgeVisible` and update using `NavbarNotifier.updateBadge` method from any part of the tree.\n\n## Adapatable to different device Sizes\n\n```dart\n NavbarRouter(\n   errorBuilder: (context) {\n     return const Center(child: Text('Error 404'));\n   },\n   isDesktop: size.width \u003e 600 ? true : false,\n   decoration: NavbarDecoration(\n     isExtended: size.width \u003e 800 ? true : false,\n     navbarType: BottomNavigationBarType.shifting),\n   ...\n   ...\n);\n```\n\n\u003cimg src=\"https://github.com/maheshmnj/navbar_router/assets/31410839/2362187a-0a19-41a0-938c-214c103e64dd\"\u003e\n\nFor detailed description of all the features and properties please visit the [documentation](https://docs.widgetmedialabs.com/navbar_router)\n\n### Curious how the navbar_router works?\n\nRead more in a [medium blog post](https://maheshmnj.medium.com/everything-about-the-bottomnavigationbar-in-flutter-e99e5470dddb) for detailed explanation.\n\nYoutube: [Heres a discussion](https://www.youtube.com/watch?v=IhlikgW8OY8\u0026t=614s) I had with [Allen Wyma](https://twitter.com/fhwflutter) from Flying high with Fluter regarding this package.\n\n## **Contribution**\n\nContributions are welcome! for more details on how to contribute, please see the [contributing guide](./CONTRIBUTING.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaheshj01%2Fnavbar_router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaheshj01%2Fnavbar_router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaheshj01%2Fnavbar_router/lists"}