creating 404 error page - no error but still not working

Question

I want to create a 404 error page for all unknown route. The code should be fine, because I don't get any error messages. But unfortunatly it doesn't work at all. When I type any unknown route in the url, then I get navigated to the overview-, driver- or clientspage. So the navigation to the 404 error page don't work.

I hope u can help me to find the mistake.

code from main.dart:

-with this code it should actually work or not? unknowRoute = PageNotFound(), if the route is not found, then navigate to PageNotFound().

initialRoute: AuthenticationPageRoute,
      unknownRoute: GetPage(name: "/not-found", page: () => PageNotFound(),
      transition: Transition.fadeIn
      ),
      getPages: [
        GetPage(name: RootRoute, page: () {
          return SiteLayout();
        }),
        GetPage(name: AuthenticationPageRoute, page: () => AuthenticationPage())

router.dart code:

import 'dart:js';

import 'package:fitness_webserver/pages/authentication/authentication.dart';
import 'package:fitness_webserver/pages/clients/clients.dart';
import 'package:fitness_webserver/pages/drivers/drivers.dart';
import 'package:fitness_webserver/pages/overview/overview.dart';
import 'package:fitness_webserver/routing/routes.dart';
import 'package:flutter/material.dart';

Route <dynamic> generateRoute (RouteSettings settings){   //taking route settings from which we get route name
  switch (settings.name){
    case OverViewPageRoute:       //if route name = OverViewPageRoute, then return OverViewPage
      return _getPageRoute(OverViewPage());
    case DriversPageRoute:
      return _getPageRoute(DriversPage());
    case ClientsPageRoute:
      return _getPageRoute(ClientsPage());
    default:
      return _getPageRoute(OverViewPage());
  }

}

PageRoute _getPageRoute (Widget child){
  return MaterialPageRoute(builder: (context) => child);      // using this methode to navigate to the page
}

routes.dart code:

const RootRoute = "/";

const OverViewPageDisplayName = "Overview";
const OverViewPageRoute = "/overview";

const DriversPageDisplayName = "Drivers";
const DriversPageRoute = "/drivers";

const ClientsPageDisplayName = "Clients";
const ClientsPageRoute = "/clients";

const AuthenticationPageDisplayName = "Log Out";     // for log in and log out
const AuthenticationPageRoute = "/auth";

class MenuItem{
  final String name;
  final String route;

  MenuItem(this.name, this.route);
}

List <MenuItem> sideMenuItems = [
  MenuItem(OverViewPageDisplayName, OverViewPageRoute),
  MenuItem(DriversPageDisplayName, DriversPageRoute),
  MenuItem(ClientsPageDisplayName, ClientsPageRoute),
  MenuItem(AuthenticationPageDisplayName, AuthenticationPageRoute),
];

menu_controller.dart code:

import 'package:fitness_webserver/routing/routes.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../constants/style.dart';

class MenuController extends GetxController {
  static MenuController instance = Get.find();
  var activeItem = OverViewPageDisplayName.obs;
  var hoverItem = "".obs;

  changeActiveItemTo(String itemName) {
    activeItem.value = itemName;        //to control which Item is active
  }

  onHover (String itemName){
    if (!isActive(itemName)) hoverItem.value = itemName;
  }

  isActive (String itemName) => activeItem.value == itemName;         //controlling the item name which is active

  isHovering (String itemName) => hoverItem.value == itemName;        //controlling the item name which is hovered

  Widget returnIconFor (String itemName) {
    switch (itemName) {             //depending on item name return icon
      case OverViewPageDisplayName:
        return _customIcon(Icons.trending_up, itemName);
      case DriversPageDisplayName:
        return _customIcon(Icons.drive_eta, itemName);
      case ClientsPageDisplayName:
        return _customIcon(Icons.people_alt_outlined, itemName);
      case AuthenticationPageDisplayName:
        return _customIcon(Icons.exit_to_app, itemName);
      default:
        return _customIcon(Icons.exit_to_app, itemName);



    }
  }

  Widget _customIcon (IconData icon, String itemName){
    if(isActive(itemName))
      return Icon (
          icon,
          size: 22,
          color: dark
      );   //when the item is active, then we return a Widget which is slightly bigger than the other
    else {
      return Icon(
        icon,
        color: isHovering(itemName) ? dark : lightGrey,
      );          //when the item is not active, then we return the icon and when hover, then colour = dark (not hover =  grey)
    }
  }

}

layout.dart code:

import 'package:fitness_webserver/helpers/responsiveness.dart';
import 'package:fitness_webserver/widgets/large_screen.dart';
import 'package:fitness_webserver/widgets/side_menu.dart';
import 'package:fitness_webserver/widgets/small_screen.dart';
import 'package:fitness_webserver/widgets/top_nav.dart';
import 'package:flutter/material.dart';

class SiteLayout extends StatelessWidget {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: scaffoldKey,         // need a key for the Scaffold
        extendBodyBehindAppBar: true,
        appBar: topNavigationBar(context, scaffoldKey),
        drawer: Drawer(
          child: SideMenu(),
        ),
        body: ResponsiveWidget(
          largeScreen: LargeScreen(),
          smallScreen: SmallScreen(),)
    );
  }
}

main.dart code:

import 'package:fitness_webserver/constants/style.dart';
import 'package:fitness_webserver/controllers/menu_controller.dart';
import 'package:fitness_webserver/controllers/navigation_controller.dart';
import 'package:fitness_webserver/pages/404/error_page.dart';
import 'package:fitness_webserver/pages/authentication/authentication.dart';
import 'package:fitness_webserver/routing/routes.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'layout.dart';

void main (){
  Get.put(MenuController());     //registration of the controller
  Get.put(NavigationController());
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: AuthenticationPageRoute,
      unknownRoute: GetPage(name: "/not-found", page: () => PageNotFound(),
      transition: Transition.fadeIn
      ),
      getPages: [
        GetPage(name: RootRoute, page: () {
          return SiteLayout();
        }),
        GetPage(name: AuthenticationPageRoute, page: () => AuthenticationPage()),
      ],
      debugShowCheckedModeBanner: false,
      title: "Dashboard",
      theme:ThemeData(
        scaffoldBackgroundColor: light,
        textTheme: GoogleFonts.mulishTextTheme(
          Theme.of(context).textTheme
        ).apply(
          bodyColor: Colors.black
        ),
        pageTransitionsTheme:  PageTransitionsTheme(
          builders: {
          TargetPlatform.iOS:  FadeUpwardsPageTransitionsBuilder(),
          TargetPlatform.android: FadeUpwardsPageTransitionsBuilder()
        }),
        primaryColor: Colors.blue
      ),
    ); //GetMaterialApp
  }
}

Thank you for your help!