Not able to load another screen on flutter app using page routing

I am trying to create a flutter app, and I am trying to test out the routing methods to link my home page to different screens.

I have a button on my initial screen that is supposed to open another page, but for some reason the page isn’t seem to opening.

The error I encounter is this:

════════ Exception caught by gesture ═══════════════════════════════════════════

Could not find a generator for route RouteSettings("/about", null) in the _WidgetsAppState.
════════════════════════════════════════════════════════════════════════════════

This is my route.dart file:

import 'package:quizapp/about/about.dart';
import 'package:quizapp/home/home.dart';
import 'package:quizapp/login/login.dart';
import 'package:quizapp/topic/topic.dart';
import 'package:quizapp/profile/profile.dart';

var appRoutes = {
  '/': (context) => const HomeScreen(),
  'about': (context) => const AboutScreen(),
  'login': (context) => const LoginScreen(),
  'topic': (context) => const TopicScreen(),
  'profile': (context) => const ProfileScreen()
};

This is my main.dart file:

import 'package:flutter/material.dart';

import 'package:firebase_core/firebase_core.dart';
import 'package:quizapp/routes.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Initialize FlutterFire:
      future: _initialization,
      builder: (context, snapshot) {
        // Check for errors
        if (snapshot.hasError) {
          return const Text('error');
        }

        // Once complete, show your application
        if (snapshot.connectionState == ConnectionState.done) {
          print('Success');
          return MaterialApp(
            routes: appRoutes,
          );
        }

        // Otherwise, show something whilst waiting for initialization to complete
        return const Text('Error');
      },
    );
  }
}

This is the home.dart file:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: ElevatedButton(
        onPressed: () => Navigator.pushNamed(context, '/about'),
        child: const Text('About Page'),
      ),
    );
  }
}

And the about.dart file:
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('About Screen'),
      ),
      body: const Center(
          child: SizedBox(
        child: Text('About Content'),
      )),
    );
  }
}

The Widget Tree layout for reference.

Any input/help would be highly appreciated, thanks.