Flutter Navigator not working with named routes

Question

I'm trying to use the Navigator to navigate between named routes. Despite the fact that a question exists here of similar nature, I did not find the answers to be particularly helpful. Additionally when I tried to implement some of the proposed solutions none of them worked.

The relevant error is:

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.

I tried removing and adding the providers and that doesnt seem to be the cause of the problem, I have tested that access to the Provider.of<T>(context) interface works as expected.

I also tried implementing the Builder widget but that was also ineffective.

For clarification, Naigator.of(context).pushNamed('/home') appears within the build method of LandingPage for debugging purposes.

Code:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [Provider<LiraAnchor>(create: (_) => LiraAnchor())],
      child: MaterialApp(
        theme: ThemeData(
          primaryColor: LiraColours.highlightGreen,
          highlightColor: LiraColours.highlightGreen,
          accentColor: LiraColours.highlightGreen,
          cursorColor: LiraColours.highlightGreen,
          indicatorColor: LiraColours.highlightGreen,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        debugShowCheckedModeBanner: false,
        routes: {'/home': (ctx) => HomePage(), '/topup': (ctx) => TopUpPage()},
        builder: (ctx, _) {
          return LandingPage();
        },
      ),
    );
  }
}

class LandingPage extends StatefulWidget {
  LandingPage({Key key}) : super(key: key);

  @override
  _LandingPageState createState() => _LandingPageState();
}

class _LandingPageState extends State<LandingPage> {
  final PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final double width = mediaQuery.size.width;
    final double height = mediaQuery.size.height;
    final List<Widget> onboarding = [
      SplashPage(width: width, height: height, pageController: _pageController),
      SignInPage(height: height, width: width)
    ];
    Navigator.of(context).pushNamed('/home');
    return Scaffold(
      backgroundColor: Color(0xFFECF0F3),
      body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints viewportConstraints) {
        return ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: viewportConstraints.maxHeight,
            ),
            child: IntrinsicHeight(
              child: SingleChildScrollView(
                child: Container(
                  width: width,
                  height: height,
                  child: PageView.builder(
                      controller: this._pageController,
                      itemCount: onboarding.length,
                      itemBuilder: (ctx, index) {
                        return onboarding[index];
                      }),
                ),
              ),
            ));
      }),
    );
  }
}

Answer 1

replace this line

routes: {'/home': (ctx) => HomePage(), '/topup': (ctx) => TopUpPage()},

with

initialRoute: RoutesLinks.main,
onGenerateRoute: RoutesProvider.provideRoutes,

and add this file

class RoutesProvider {
static Route<dynamic> provideRoutes(RouteSettings settings) {
// Getting arguments passed, in while calling Navigator.pushNamed
final arguments = settings.arguments;

switch (settings.name) {
  case RoutesLinks.main:
    return MaterialPageRoute(builder: (_) => MainPage());
  case RoutesLinks.home:
    return MaterialPageRoute(builder: (_) => HomeScreen());
  default:
    // If there is no such named route in the switch statement, e.g. /third
    return _errorRoute();
}
}

static Route<dynamic> _errorRoute() {
return MaterialPageRoute(builder: (_) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Error'),
    ),
    body: Center(
      child: Text('ERROR'),
    ),
  );
  });
 }
 }

 class RoutesLinks {
  static const main = '/';
  static const home = '/home';
 }