add back button functionality

lib/main.dart

@@ -13,6 +13,8 @@ import 'components/login/login.dart';
 import 'components/pages/dashboard.dart';
 import 'components/dashboard/topTractionPanel.dart';
 
+import 'package:go_router/go_router.dart';
+
 late ApiService api;
 
 void main() {
@@ -46,19 +48,6 @@ void main() {
   );
 }
 
-class AppRoot extends StatelessWidget {
-  const AppRoot({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Consumer<AuthService>(
-      builder: (context, auth, child) {
-        return auth.isLoggedIn ? MyHomePage() : LoginScreen();
-      },
-    );
-  }
-}
-
 class MyApp extends StatelessWidget {
   MyApp({super.key});
 
@@ -67,13 +56,48 @@ class MyApp extends StatelessWidget {
     seedColor: Colors.red,
     brightness: Brightness.dark,
   );
+
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
+    final GoRouter router = GoRouter(
+      refreshListenable: context
+          .read<AuthService>(), // `AuthService` extends `ChangeNotifier`
+      redirect: (context, state) {
+        final auth = Provider.of<AuthService>(context, listen: false);
+        final loggedIn = auth.isLoggedIn;
+        final loggingIn = state.uri.toString() == '/login';
+
+        // Redirect to login if not logged in and trying to access protected pages
+        if (!loggedIn && !loggingIn) return '/login';
+
+        // Redirect to home if already logged in and trying to go to login
+        if (loggedIn && loggingIn) return '/';
+
+        // No redirection
+        return null;
+      },
+      routes: [
+        ShellRoute(
+          builder: (context, state, child) {
+            return MyHomePage(child: child);
+          },
+          routes: [
+            GoRoute(path: '/', builder: (_, __) => const Dashboard()),
+            GoRoute(path: '/calculator', builder: (_, __) => CalculatorPage()),
+            GoRoute(path: '/legs', builder: (_, __) => LegsPage()),
+            GoRoute(path: '/traction', builder: (_, __) => TractionPage()),
+          ],
+        ),
+        GoRoute(path: '/login', builder: (_, __) => const LoginScreen()),
+      ],
+    );
+
     return DynamicColorBuilder(
       builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
-        return MaterialApp(
+        return MaterialApp.router(
           title: 'Flutter Demo',
+          routerConfig: router,
           theme: ThemeData(
             useMaterial3: true,
             // This is the theme of your application.
@@ -98,7 +122,6 @@ class MyApp extends StatelessWidget {
             colorScheme: darkDynamic ?? defaultDark,
           ),
           themeMode: ThemeMode.system,
-          home: AppRoot(),
         );
       },
     );
@@ -106,7 +129,8 @@ class MyApp extends StatelessWidget {
 }
 
 class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key});
+  final Widget child;
+  const MyHomePage({super.key, required this.child});
 
   // This widget is the home page of your application. It is stateful, meaning
   // that it has a State object (defined below) that contains fields that affect
@@ -123,12 +147,12 @@ class MyHomePage extends StatefulWidget {
 
 class _MyHomePageState extends State<MyHomePage> {
   int pageIndex = 0;
-  final List<Widget> contentPages = [
-    Dashboard(),
-    CalculatorPage(),
-    LegsPage(),
-    TractionPage(),
-    Center(child: Text("Trips Page")),
+  final List<String> contentPages = [
+    "/",
+    "/calculator",
+    "/legs",
+    "/traction",
+    "/",
   ];
 
   bool loggedIn = false;
@@ -165,7 +189,7 @@ class _MyHomePageState extends State<MyHomePage> {
     final auth = context.read<AuthService>();
 
     if (data.homepageStats != null) {
-      currentPage = contentPages[pageIndex];
+      currentPage = widget.child;
     } else {
       currentPage = Center(child: CircularProgressIndicator());
     }
@@ -210,6 +234,7 @@ class _MyHomePageState extends State<MyHomePage> {
         onDestinationSelected: (int index) {
           setState(() {
             pageIndex = index;
+            context.push(contentPages[index]);
           });
         },
         destinations: [