[FIXED] Exception when trying to use navigator

Issue

I am getting an exception: FlutterError (Navigator operation requested with a context that does not include a Navigator. The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.)

This is the important code of the first page (Skipped some code with ... that wasn't relevant):

import 'package:google_fonts/google_fonts.dart';
import 'register.dart';

void main() async {
...
runApp(const MyApp());

}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ...

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
            textTheme: GoogleFonts.interTextTheme(
          Theme.of(context).textTheme,
        )),
home: Scaffold(
          body: Container(
            width: double.infinity,
            ...

                Align(
                    alignment: Alignment.centerRight,
                    child: TextButton(
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => SecondRoute()));
                      },
                      child: Text(
                        "Forgot Password?",
                        style: GoogleFonts.inter(
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ),
             ...

        ),
    ));

} }

This is the second page:

import 'package:flutter/material.dart';

class SecondRoute extends Navigator {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
    );
  }
}

There are no syntax errors only exceptions thrown when the code is run. I have tried already looking for the solution but the other way of putting the material app in the runApp() method, to my understanding doesn't work for the way I use the Text Theme and use context.

Let me know if I need to give more code or context.

Any help would be greatly appreciated!

Solution

Try changing:

class SecondRoute extends Navigator {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
    );
  }
}

to:

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
    );
  }
}

---

Edit, also move the scaffold from _MyAppState into it's own widget.

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: double.infinity,
        child: Align(
          alignment: Alignment.centerRight,
          child: TextButton(
            onPressed: () {
              print('hello');
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondRoute()),
              );
            },
            child: Text(
              "Forgot Password?",
              style: GoogleFonts.inter(
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

And then use in _MyAppState like so:

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          textTheme: GoogleFonts.interTextTheme(
        Theme.of(context).textTheme,
      )),
      home: FirstRoute(),
    );
  }
}

Answered By - mmcdon20