Flutter namedRoutes are not navigating to clicked screen but throw no error log

Question

I've been trying to use namedRoutes with a custom 'NavLink' component to add to my drawer but the links are not navigating to the clicked screen. They do not throw error logs when I click them so I don't know what is happening.

main.dart

    import 'package:flutter/material.dart';
import 'package:hire_me/homepage.dart';
import 'package:hire_me/screens/notFound.dart';
import 'package:hire_me/screens/todoList.dart';
import 'package:hire_me/screens/nodeJs.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'My Portfolio',
        theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: TextTheme(
                headline1: TextStyle(
                    fontSize: 36.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.black),
                headline2:
                    TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
                bodyText1:
                    TextStyle(fontSize: 12.0, fontWeight: FontWeight.normal))),
        initialRoute: '/',
        routes: {
          '/': (context) => HomePage(),
          '/todoList': (context) => TodoList(),
          '/nodeJs': (context) => NodeJs(),
          '/notFound': (context) => NotFound(),
        });
  }
}

Homepage component

    class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carlos Gumucio'),
        centerTitle: true,
      ),
      drawer: Drawer(
          child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('More from me')),
          NavLink(title: 'Todo List', route: '/todoList'),
          NavLink(title: 'NodeJs API', route: '/nodeJs'),
        ],
      )),
      body: SingleChildScrollView(...

navLink.dart component

    import 'package:flutter/material.dart';

class NavLink extends StatelessWidget {
  const NavLink({Key? key, this.title = 'link here', this.route = '/notFound'})
      : super(key: key);

  final String title;
  final String route;

  @override
  Widget build(BuildContext context) {
    return ListTile(
        title: Text(title),
        onTap: () {
          // go to route ... Navigator.push(context, route)
          Navigator.pushNamed(context, route);
          // close the nav after navigating
          Navigator.pop(context);
        });
  }
}

pubspec.yaml

    name: hire_me
description: Reach me hub.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  url_launcher: ^6.0.4
  material_design_icons_flutter: ^4.0.5955
  google_fonts: ^2.0.0
  
dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - assets/images/
 

flutter doctor

[√] Flutter (Channel beta, 2.2.0-10.3.pre, on Microsoft Windows [Versión 10.0.19042.985], locale
    es-CL)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio
[√] VS Code (version 1.56.0)
[√] Connected device (2 available)

• No issues found!

Answer 1

Well, I see that you pop the screen right after you pushed it:

@override
  Widget build(BuildContext context) {
    return ListTile(
        title: Text(title),
        onTap: () {
          // go to route ... Navigator.push(context, route)
          Navigator.pushNamed(context, route);
          // close the nav after navigating
          Navigator.pop(context); // This will pop your last pushed route
        });
  }

Try to comment out the line with Navigator.pop(context);.

EDIT 1:

For having the drawer closed before you push a new route:

@override
  Widget build(BuildContext context) {
    return ListTile(
        title: Text(title),
        onTap: () {
          // close the nav before navigating
          Navigator.pop(context); // This will pop your last pushed 
          // go to route ... Navigator.push(context, route)
          Navigator.pushNamed(context, route);
          route
        });
  }