Go router navigation not working on drawer flutter

Question

I was trying to shift from navigator the go_router package for my side drawer but it is not responding or redirecting them to the pages...here is the code from my homepage.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:go_router/go_router.dart';
import 'package:shared_preferences/shared_preferences.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> orders = [
    'Order 1',
    'Order 2',
    'Order 2',
    'Order 2',
    'Order 2',
    'Order 2',
    'Order 2',
    'Order 2',
    'Order 2',
    'Order 2',
    'Order 2',
    'Order 2',
  ];

  bool isOnline = false;

  // Function to log out the user and clear the token
  void logoutUser(BuildContext context) async {
    await clearToken(); // Clear the token
    // Navigate to the login page after logout
    GoRouter.of(context).go('/login');
  }

  // Function to clear the token from storage
  Future<void> clearToken() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove('jwt'); // Removes the token
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo[400],
        title: Text(
          'Your Orders',
          style: GoogleFonts.lato(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
        
        centerTitle: true,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(20.0)),
        ),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            // Upper half of the drawer with an icon and black background
            Container(
              color: Colors.indigo[400],
              height: 150.0,
              child: Center(
                child: Image.asset(
                  'assets/icons/icon.png',
                  width: 160.0,
                  height: 160.0,
                ),
              ),
            ),
            // List of links that redirect to other pages
            ListTile(
              leading: Icon(
                Icons.shopping_bag,
                color: Colors.indigo[600],
              ),
              title: const Text('Your Orders'),
              onTap: () {
                GoRouter.of(context).go('/');
                Navigator.pop(context); // Close the drawer
              },
            ),
            ListTile(
              leading: Icon(
                Icons.list,
                color: Colors.indigo[600],
              ),
              title: const Text('Delivered Summary'),
              onTap: () {
                GoRouter.of(context).go('/delivered_summary');
                Navigator.pop(context); // Close the drawer
              },
            ),
            ListTile(
              leading: Icon(
                Icons.person,
                color: Colors.indigo[600],
              ),
              title: const Text('Profile'),
              onTap: () {
                GoRouter.of(context).go('/profile');
                Navigator.pop(context); // Close the drawer
              },
            ),
            ListTile(
              leading: Icon(
                Icons.logout,
                color: Colors.indigo[600],
              ),
              title: const Text('Logout'),
              onTap: () {
                logoutUser(
                    context); // Call the logout function with the context
                Navigator.pop(context); // Close the drawer
              },
            ),
          ],
        ),
      ),
      body: Column(
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                const Text("Are you available?"),
                const SizedBox(width: 10),
                Switch(
                  value: isOnline,
                  onChanged: (value) {
                    setState(() {
                      isOnline = value;
                    });
                  },
                  activeColor: const Color(0xFF5C6BC0),
                ),
              ],
            ),
          ),
          Expanded(
            child: isOnline
                ? ListView.builder(
                    itemCount: orders.length,
                    itemBuilder: (context, index) {
                      return const OrderCard();
                    },
                  )
                : Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/icons/offline.png',
                          width: 100.0,
                          height: 100.0,
                        ),
                        const SizedBox(height: 20),
                        const Text("Please go online to see orders"),
                      ],
                    ),
                  ),
          ),
        ],
      ),
    );
  }
}

class OrderCard extends StatelessWidget {
  const OrderCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(8.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: ListTile(
        contentPadding: const EdgeInsets.all(8.0),
        title: const Text('Order 1'), // Replace with the order's title
        subtitle: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 8),
            const Row(
              children: [
                Icon(
                  Icons.location_on,
                  color: Color(0xFF5C6BC0),
                ), // Location pin icon
                SizedBox(width: 8),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Store Address:',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text('123 Main St, Dummy Store Address'),
                  ],
                ),
              ],
            ),
            const SizedBox(height: 8),
            const Row(
              children: [
                Icon(Icons.location_on,
                    color: Color(0xFF5C6BC0)), // Location pin icon
                SizedBox(width: 8),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'User Address:',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text('456 Elm St, Dummy User Address'),
                  ],
                ),
              ],
            ),
            const SizedBox(height: 8), // Add spacing
            const Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Order Time: 12:30 PM',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text(
                  'Delivery Time: 1:30 PM',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ],
            ),
            const SizedBox(height: 8), // Add spacing
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ElevatedButton(
                  onPressed: () {
                    GoRouter.of(context).go('/rider_tracking');
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.green,
                  ),
                  child: const Text('Accept'),
                ),
                ElevatedButton(
                  onPressed: () {
                    // Add logic for rejecting the order
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.red,
                  ),
                  child: const Text('Reject'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

I was expecting the menus on the drawer redirect to each of the screen they were assigned. but whenever I tap on the buttons I keep getting this error The following assertion was thrown while handling a gesture: No GoRouter found in context 'package:go_router/src/router.dart': Failed assertion: line 507 pos 12: 'inherited != null'

When the exception was thrown, this was the stack: #2 GoRouter.of (package:go_router/src/router.dart:507:12) #3 OrderCard.build. (package:ethiospare_delivery/pages/home_page.dart:249:30) #4 _InkResponseState.handleTap (package:flutter/src/material/ink_well.dart:1154:21) #5 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:275:24) #6 TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:654:11) #7 BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:311:5) #8 BaseTapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:281:7) #9 GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:167:27) #10 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:492:20) #11 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:468:22) #12 RendererBinding.dispatchEvent (package:flutter/src/rendering/binding.dart:333:11) #13 GestureBinding._handlePointerEventImmediately (package:flutter/src/gestures/binding.dart:413:7) #14 GestureBinding.handlePointerEvent (package:flutter/src/gestures/binding.dart:376:5) #15 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:323:7) #16 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:292:9) #17 _invoke1 (dart:ui/hooks.dart:186:13) #18 PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:424:7) #19 _dispatchPointerDataPacket (dart:ui/hooks.dart:119:31) (elided 2 frames from class _AssertionError)

Handler: "onTap" Recognizer: TapGestureRecognizer#12da8 ════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: No GoRouter found in context Another exception was thrown: No GoRouter found in context Another exception was thrown: No GoRouter found in context

Answer 1

Step 1: Wrap ur app with MaterialApp.router

class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final goRouter = ref.watch(routerProvider);
    final themeManager = ref.watch(themeProvider);

    return ScreenUtilInit(
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return MaterialApp.router(
          supportedLocales: context.supportedLocales,
          localizationsDelegates: context.localizationDelegates,
          locale: context.locale,
          routeInformationParser: goRouter.routeInformationParser,
          routerDelegate: goRouter.routerDelegate,
          routeInformationProvider: goRouter.routeInformationProvider,
          theme: AppThemes.lightTheme,
          //darkTheme: AppThemes.darkTheme,
          themeMode: themeManager.currentTheme,
          debugShowCheckedModeBanner: false,
        );
      },
    );
  }
}

Step:2 --> then set the app route

enum AppRoute {
  splash,
  onboarding,
  verification,
  signinView,
  forgotPasswordView,
  signupView,
}
// flutter packages pub run build_runner build --delete-conflicting-outputs
final routers = [
  GoRoute(
    path: '/',
    name: AppRoute.splash.name,
    builder: (context, state) => const SplashView(),
  ),
  GoRoute(
    path: '/onboarding',
    name: AppRoute.onboarding.name,
    builder: (context, state) => const OnboardingView(),
  ),
  GoRoute(
    path: '/verification',
    name: AppRoute.verification.name,
    builder: (context, state) => const VerificationScreen(),
  ),
  GoRoute(
    path: '/signin',
    name: AppRoute.signinView.name,
    builder: (context, state) => const SigninView(),
  ),
  GoRoute(
    path: '/forgotPassword',
    name: AppRoute.forgotPasswordView.name,
    builder: (context, state) => const ForgotPasswordView(),
  ),

Step:3 use it like this

 context.pushReplacementNamed(AppRoute.onboarding.name);