Why is Flutter not Navigating Based on the main.dart file?

I am trying to implement navigation with persistent widgets in Flutter, but calling Navigation.of(context).pushNamed('/route') yields a "Navigator operation requested with a context that does not include a Navigator" error.
The code for each of the classes is as follows:

main.dart

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Benchside',
      theme: ThemeData(
            fontFamily: 'GemunuLibre',
      ),
      builder: (context, child) => BaseWidget(content: child!),
      initialRoute: '/',
      routes: {
        '/': (context) => const HomePage(),
        '/profile': (context) => const ProfilePage(),
      },
      onGenerateRoute: (settings) {
        if (settings.name == '/') {
          return MaterialPageRoute(builder: (context) => const HomePage());
        }
        else if (settings.name == '/profile') {
          return MaterialPageRoute(builder: (context) => const ProfilePage());
        }
      },
    );
  }

BaseWidget.dart

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color.fromARGB(0xFF, 0xFA, 0xFA, 0xFA),
        body: SafeArea(
          minimum: const EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
          child: CColumn(children: [

        //HEADER
        AppBar(
          title: const Text(
            'BENCHSIDE',
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
          centerTitle: true,
          backgroundColor: const Color.fromARGB(0xFF, 0xFA, 0xFA, 0xFA),
          scrolledUnderElevation: 0.0,
          leading: IconButton(
            onPressed: () {  },
            icon: const Image(
              image: AssetImage('assets/images/setting.png'),
              width: 30.0,
              height: 30.0,
              color: Color.fromARGB(0xFF, 0xA4, 0xA4, 0xA4),
            ),
          ),
          actions: [
            IconButton(
                onPressed: () {},
                icon: const Image(
                  image: AssetImage('assets/images/announcements.png'),
                  width: 30.0,
                  height: 30.0,
                  color: Color.fromARGB(0xFF, 0xA4, 0xA4, 0xA4),
                )
            )
          ],
        ),


    // PAGE VIEWER
        Expanded(child: content,),

        // NAVIGATION BAR
    Container(
        decoration: const BoxDecoration(
            color: Colors.transparent,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10.0),
                topRight: Radius.circular(10.0),
            ),
        ),
        child:
                Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  GestureDetector(
                    onTap: () => {Navigator.pushNamed(context, '/')},
                    child:
                      const Image(image: AssetImage('assets/images/home.png'), 
                      width: 30.0, 
                      height: 30.0,
                  ),),
                    Image(image: AssetImage('assets/images/ranking.png'), 
                    width: 30.0, 
                    height: 30.0, 
                    color: Color.fromARGB(0xFF, 0xA4, 0xA4, 0xA4),),
                    Image(image: AssetImage('assets/images/community.png'), 
                    width: 30.0, 
                    height: 30.0, 
                    color: Color.fromARGB(0xFF, 0xA4, 0xA4, 0xA4),),
                                  GestureDetector(
                    onTap: () => {Navigator.of(context).pushNamed('/profile')},
                    child: const CircleAvatar()
                  ),
        ],),
        )],
    ),),
      );
  }

I have tried switching to using a home page instead of an initial route, but that didn’t seem to work either.

If you are still confused on what I’m trying to do, here is the guide I was following.