{"id":24809676,"url":"https://github.com/mohanedzekry/flutter-go-router-example","last_synced_at":"2025-10-13T11:31:24.903Z","repository":{"id":76279340,"uuid":"578824638","full_name":"MohanedZekry/flutter-go-router-example","owner":"MohanedZekry","description":"This is an example app showing how to implement bottom navigation with nested routes using go_router and cubit","archived":false,"fork":false,"pushed_at":"2023-03-04T00:53:22.000Z","size":194,"stargazers_count":64,"open_issues_count":2,"forks_count":9,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-06T09:11:18.988Z","etag":null,"topics":["cubit","dart","flutter","gorouter","router"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MohanedZekry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-12-16T00:55:42.000Z","updated_at":"2025-03-22T20:27:50.000Z","dependencies_parsed_at":"2023-03-05T05:30:41.699Z","dependency_job_id":null,"html_url":"https://github.com/MohanedZekry/flutter-go-router-example","commit_stats":null,"previous_names":["mohanedzekry/flutter-go-router-example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MohanedZekry/flutter-go-router-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohanedZekry%2Fflutter-go-router-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohanedZekry%2Fflutter-go-router-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohanedZekry%2Fflutter-go-router-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohanedZekry%2Fflutter-go-router-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MohanedZekry","download_url":"https://codeload.github.com/MohanedZekry/flutter-go-router-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohanedZekry%2Fflutter-go-router-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279014793,"owners_count":26085594,"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-10-13T02:00:06.723Z","response_time":61,"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":["cubit","dart","flutter","gorouter","router"],"created_at":"2025-01-30T11:15:05.285Z","updated_at":"2025-10-13T11:31:24.289Z","avatar_url":"https://github.com/MohanedZekry.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# go_router example\nThe purpose of the go_router package is that it is A declarative routing package for Flutter that uses the Router API to provide a convenient, url-based API for navigating between different screens and reduce complexity, regardless of the platform you're targeting (mobile, web, desktop), You can define URL patterns, navigate using a URL, handle deep links, and a number of other navigation-related scenarios.\n\nThis is an example app showing how to implement bottom navigation with nested routes using [go_router](https://pub.dev/packages/go_router) and [cubit](https://pub.dev/packages/flutter_bloc)\n\n## Table of Contents\n- [Requirements](#requirements)\n- [Intro](#intro)\n- [Screenshots](#screenshots)\n- [Implementation](#implementation)\n- [Why?](#why)\n\n## Requirements\n- [cubit](https://pub.dev/packages/flutter_bloc)\n- [go_router](https://pub.dev/packages/go_router)\n- [equatable](https://pub.dev/packages/equatable)\n\n## Intro\nThis example is built using go_router 6.2.0.\nNavigating bottom navbar screens with go_router.\nInstead of using buildBody and currentIndex for routing, we’ll be using go router to navigate between screens.\n\n## Screenshots\n\u003cp align=\"center\"\u003e\n  \u003cimg alt='Screenshot 1' src=\"images/GoRouter.png\" width=\"20%\"/\u003e  \n  \u003cimg alt='Screenshot 2' src=\"images/GoRouter2.png\" width=\"20%\"/\u003e  \n  \u003cimg alt='Screenshot 3' src=\"images/GoRouter3.png\" width=\"20%\"/\u003e\n\u003c/p\u003e\n\n## Implementation\nTo implement bottom navigation with go_router it's not simple or easy, but you can follow this instructions and everything will be just fine.\n\nFirst we need to configure our routing for navigation we will use `ShellRoute` it displays a UI shell around the route, Follow the implelemenation to understand it.\n\n```dart\nclass AppRouter {\n\n  static final _rootNavigatorKey = GlobalKey\u003cNavigatorState\u003e();\n  static final _shellNavigatorKey = GlobalKey\u003cNavigatorState\u003e();\n\n  static final GoRouter _router = GoRouter(\n    initialLocation: Routes.homeNamedPage,\n    debugLogDiagnostics: true,\n    navigatorKey: _rootNavigatorKey,\n    routes: [\n      ShellRoute(\n        navigatorKey: _shellNavigatorKey,\n        builder: (context, state, child) {\n          return BlocProvider(\n            create: (context) =\u003e NavigationCubit(),\n            child: MainScreen(screen: child),\n          );\n        },\n        routes: [\n          GoRoute(\n            path: Routes.homeNamedPage,\n            pageBuilder: (context, state) =\u003e\n            const NoTransitionPage(\n              child: HomeScreen(),\n            ),\n            routes: [\n              GoRoute(\n                path: Routes.homeDetailsNamedPage,\n                builder: (context, state) =\u003e const HomeDetailsScreen(),\n              ),\n            ],\n          ),\n          GoRoute(\n            path: Routes.profileNamedPage,\n            pageBuilder: (context, state) =\u003e\n            const NoTransitionPage(\n              child: ProfileScreen(),\n            ),\n            routes: [\n              GoRoute(\n                path: Routes.profileDetailsNamedPage,\n                builder: (context, state) =\u003e const ProfileDetailsScreen(),\n              ),\n            ],\n          ),\n          GoRoute(\n            path: Routes.settingsNamedPage,\n            pageBuilder: (context, state) =\u003e\n            const NoTransitionPage(\n              child: SettingScreen(),\n            ),\n          ),\n        ],\n      ),\n    ],\n    errorBuilder: (context, state) =\u003e const NotFoundScreen(),\n  );\n  \n  static GoRouter get router =\u003e _router;\n}\n```\n*Notes* `ShellRoute` has multiple routes whose returns a widget and that is child attribute to shellRoute builder.\n\n\n- after that we will implement our Cubit\n```dart\nclass NavigationState extends Equatable {\n\n  final String bottomNavItems;\n  final int index;\n\n  const NavigationState({required this.bottomNavItems, required this.index});\n\n  @override\n  List\u003cObject\u003e get props =\u003e [bottomNavItems, index];\n}\n```\n\n- we building three screens in the bottom navigation\n```dart\nenum BottomNavItems {\n  home,\n  profile,\n  settings\n}\n```\n\n- our Cubit\n```dart\npart 'navigation_state.dart';\n\nclass NavigationCubit extends Cubit\u003cNavigationState\u003e {\n  NavigationCubit() : super(const NavigationState(bottomNavItems: Routes.homeNamedPage, index: 0));\n\n  void getNavBarItem(int index) {\n    switch (index) {\n      case 0:\n        emit(const NavigationState(bottomNavItems: Routes.homeNamedPage,index:  0));\n        break;\n      case 1:\n        emit(const NavigationState(bottomNavItems: Routes.profileNamedPage,index:  1));\n        break;\n      case 2:\n        emit(const NavigationState(bottomNavItems: Routes.settingsNamedPage,index:  2));\n        break;\n    }\n  }\n}\n```\n\n- simple bottom navigation bar\n```dart\nBottomNavigationBar(\n          onTap: (value) {\n            if(state.index != value){\n              context.read\u003cNavigationCubit\u003e().getNavBarItem(value);\n              context.go(tabs[value].initialLocation);\n            }\n          },\n          showSelectedLabels: false,\n          showUnselectedLabels: false,\n          elevation: 0,\n          backgroundColor: Colors.black,\n          unselectedItemColor: Colors.white,\n          selectedIconTheme: IconThemeData(\n            size: ((IconTheme\n                .of(mContext)\n                .size)! * 1.3),\n          ),\n          items: tabs,\n          currentIndex: state.index,\n          type: BottomNavigationBarType.fixed,\n        );\n```\n\n## Why?\nReason being it’s now under the wing of official Flutter packages and not to mention its simplicity and good documentation.\n\nFor scenarios like this GoRouter has a new type of route called ShellRoute. ShellRoute is a route that displays a UI shell around the route. You’ll instinctively understand about shellRoute once you view this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohanedzekry%2Fflutter-go-router-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohanedzekry%2Fflutter-go-router-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohanedzekry%2Fflutter-go-router-example/lists"}