Navigator.of in flutter

hi guys I am not able to navigate in my flutter pages:

when I run this command on FLOATINGACTIONBUTTON onPressFunction (

onPressed: () {
                Navigator.of(context).pushNamed('/new_note');
              },

I get this error Could not find a generator for route RouteSettings("/new_note", null) in the _WidgetsAppState.
below is code structure that I am using for my notes app:

main.dart:
import 'package:flutter/material.dart';
import 'package:notes_app/pages/start_page.dart';

void main() {
  runApp(const NoteMain());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: StartPage());
  }
}

start_page.dart
import 'package:flutter/material.dart';
import '../components/text_widget.dart';
import '../components/title_text_widget.dart';

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

  @override
  State<StartPage> createState() => _StartPageState();
}

class _StartPageState extends State<StartPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff333333),
      appBar: AppBar(
        // setting default color for our Icons to white
        iconTheme: IconThemeData(color: Colors.white, size: 24),
        backgroundColor: Color(0xff333333),
        // calling TextWidget and initializing it
        title: TitleTextWidget(
          title: "NOTES",
          fontSize: 24.0,
          fontColor: Colors.white,
        ),
        actions: [
          Container(
            margin: EdgeInsets.symmetric(horizontal: 8.0),
            child: IconButton(
              //TODO: MAKE SEARCH for NOTES
              onPressed: () {},
              icon: Icon(Icons.search),
            ),
          ),
        ],
      ),

      // BODY
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image(image: AssetImage('assets/take_note.png')),

          Divider(
            height: 10.0,
            color: Colors.white,
            indent: 100,
            endIndent: 100,
          ),

          TextWidget(
            title: 'Start Adding Notes',
            fontSize: 18.0,
            fontWeight: FontWeight.normal,
            fontColor: Colors.white,
          ),
        ],
      ),

      floatingActionButton: Builder(
        builder:
            (context) => FloatingActionButton(
              backgroundColor: Colors.white,
              // TODO: ADD FUNUCTIONALITY IN HIVEDB
              onPressed: () {
                Navigator.of(context).pushNamed('/new_note');
              },

              child: Icon(
                Icons.add_circle_sharp,
                color: Color(0xff333333),
                size: 34,
              ),
            ),
      ),
    );
  }
}

new_note.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../components/title_text_widget.dart';

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

  @override
  State<NewNote> createState() => _NewNoteState();
}

class _NewNoteState extends State<NewNote> {
  final _titleController = TextEditingController();
  final _notesController = TextEditingController();

  @override
  void dispose() {
    _titleController.dispose();
    _notesController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff333333),
      // Appbar with Actions
      appBar: AppBar(
        // setting default color for our Icons to white
        iconTheme: IconThemeData(color: Colors.white, size: 24),
        backgroundColor: Color(0xff333333),
        // calling TextWidget and initializing it
        title: TitleTextWidget(
          title: "NOTES",
          fontSize: 24.0,
          fontColor: Colors.white,
        ),
        actions: [
          Container(
            margin: EdgeInsets.symmetric(horizontal: 8.0),
            child: IconButton(
              //TODO: Save Note for NOTES
              onPressed: () {},
              icon: Icon(Icons.save),
            ),
          ),
        ],
      ),
      body: Column(
        children: [
          ListTile(
            title: TextField(
              controller: _titleController,
              style: GoogleFonts.pacifico(
                textStyle: TextStyle(
                  fontSize: 36.0,
                  color: Colors.white,
                  letterSpacing: 3,
                ),
              ),
              decoration: InputDecoration(
                hintText: 'Enter Title',
                hintStyle: TextStyle(color: Colors.white),
              ),
            ),
          ),
          ListTile(
            title: TextField(
              controller: _notesController,
              style: GoogleFonts.pacifico(
                textStyle: TextStyle(
                  fontSize: 18.0,
                  color: Colors.white,
                  letterSpacing: 3,
                ),
              ),
              decoration: InputDecoration(
                hintText: 'Enter Title',
                hintStyle: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

tried adding seperate Builder in FAB and then tried routing still same error

You already defined the home route '/'. In order to navigate to '/new_note' you have to define a route with that name:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false, 
    home: StartPage(), // the route named '/'
    routes: <String, WidgetBuilder> {
      '/new_note': (BuildContext context) => const NewNote(),
    },
  );
}

For reference see the docs of Navigator Class which include a section with the title "Using named navigator routes".