Add responsive nested navigation with NaviationBar, NavigationRail (bizz84#138)

Author: bizz84

lib/src/routing/app_router.dart

@@ -14,7 +14,7 @@ import 'package:starter_architecture_flutter_firebase/src/features/jobs/presenta
 import 'package:starter_architecture_flutter_firebase/src/features/onboarding/data/onboarding_repository.dart';
 import 'package:starter_architecture_flutter_firebase/src/features/onboarding/presentation/onboarding_screen.dart';
 import 'package:starter_architecture_flutter_firebase/src/routing/go_router_refresh_stream.dart';
-import 'package:starter_architecture_flutter_firebase/src/routing/scaffold_with_bottom_nav_bar.dart';
+import 'package:starter_architecture_flutter_firebase/src/routing/scaffold_with_nested_navigation.dart';
 
 part 'app_router.g.dart';
 
@@ -90,7 +90,7 @@ GoRouter goRouter(GoRouterRef ref) {
       // https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/stateful_shell_route.dart
       StatefulShellRoute.indexedStack(
         builder: (context, state, navigationShell) {
-          return ScaffoldWithBottomNavBar(navigationShell: navigationShell);
+          return ScaffoldWithNestedNavigation(navigationShell: navigationShell);
         },
         branches: [
           StatefulShellBranch(

lib/src/routing/scaffold_with_bottom_nav_bar.dart

@@ -0,0 +1,135 @@
+// ignore_for_file: public_member_api_docs, sort_constructors_first
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+import 'package:starter_architecture_flutter_firebase/src/localization/string_hardcoded.dart';
+
+// Stateful navigation based on:
+// https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/stateful_shell_route.dart
+class ScaffoldWithNestedNavigation extends StatelessWidget {
+  const ScaffoldWithNestedNavigation({
+    Key? key,
+    required this.navigationShell,
+  }) : super(
+            key: key ?? const ValueKey<String>('ScaffoldWithNestedNavigation'));
+  final StatefulNavigationShell navigationShell;
+
+  void _goBranch(int index) {
+    navigationShell.goBranch(
+      index,
+      // A common pattern when using bottom navigation bars is to support
+      // navigating to the initial location when tapping the item that is
+      // already active. This example demonstrates how to support this behavior,
+      // using the initialLocation parameter of goBranch.
+      initialLocation: index == navigationShell.currentIndex,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final size = MediaQuery.sizeOf(context);
+    if (size.width < 450) {
+      return ScaffoldWithBottomNavBar(
+        body: navigationShell,
+        currentIndex: navigationShell.currentIndex,
+        onDestinationSelected: _goBranch,
+      );
+    } else {
+      return ScaffoldWithNavigationRail(
+        body: navigationShell,
+        currentIndex: navigationShell.currentIndex,
+        onDestinationSelected: _goBranch,
+      );
+    }
+  }
+}
+
+class ScaffoldWithBottomNavBar extends StatelessWidget {
+  const ScaffoldWithBottomNavBar({
+    super.key,
+    required this.body,
+    required this.currentIndex,
+    required this.onDestinationSelected,
+  });
+  final Widget body;
+  final int currentIndex;
+  final ValueChanged<int> onDestinationSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: body,
+      bottomNavigationBar: NavigationBar(
+        selectedIndex: currentIndex,
+        destinations: [
+          // products
+          NavigationDestination(
+            icon: const Icon(Icons.work_outline),
+            selectedIcon: const Icon(Icons.work),
+            label: 'Jobs'.hardcoded,
+          ),
+          NavigationDestination(
+            icon: const Icon(Icons.view_headline_outlined),
+            selectedIcon: const Icon(Icons.view_headline),
+            label: 'Entries'.hardcoded,
+          ),
+          NavigationDestination(
+            icon: const Icon(Icons.person_outline),
+            selectedIcon: const Icon(Icons.person),
+            label: 'Account'.hardcoded,
+          ),
+        ],
+        onDestinationSelected: onDestinationSelected,
+      ),
+    );
+  }
+}
+
+class ScaffoldWithNavigationRail extends StatelessWidget {
+  const ScaffoldWithNavigationRail({
+    super.key,
+    required this.body,
+    required this.currentIndex,
+    required this.onDestinationSelected,
+  });
+  final Widget body;
+  final int currentIndex;
+  final ValueChanged<int> onDestinationSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Row(
+        children: [
+          NavigationRail(
+            selectedIndex: currentIndex,
+            onDestinationSelected: onDestinationSelected,
+            labelType: NavigationRailLabelType.all,
+            destinations: <NavigationRailDestination>[
+              NavigationRailDestination(
+                icon: const Icon(Icons.work_outline),
+                selectedIcon: const Icon(Icons.work),
+                label: Text('Jobs'.hardcoded),
+              ),
+              NavigationRailDestination(
+                icon: const Icon(Icons.view_headline_outlined),
+                selectedIcon: const Icon(Icons.view_headline),
+                label: Text('Entries'.hardcoded),
+              ),
+              NavigationRailDestination(
+                icon: const Icon(Icons.person_outline),
+                selectedIcon: const Icon(Icons.person),
+                label: Text('Account'.hardcoded),
+              ),
+            ],
+          ),
+          const VerticalDivider(thickness: 1, width: 1),
+          // This is the main content.
+          Expanded(
+            child: body,
+          ),
+        ],
+      ),
+    );
+  }
+}