WHY "Navigator operation requested with a context that does not include a Navigator"

Question

I know how to solve the problem but I don't why it's happening:

I've an app with 2 screens:

This main.dart:

import 'package:flutter/material.dart';
import 'HomeActivity.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new HomeActivity();
  }
}

HomeActivity.Dart:

import 'package:flutter/material.dart';
import 'AddGameActivity.dart';

class HomeActivity extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(title: new Text("Home")),
        floatingActionButton: FloatingActionButton(
            onPressed: () => Navigator.push(context, new MaterialPageRoute(builder: (context) => new AddGameActivity())),
            child: new Icon(Icons.add))),
    );
  }

So here I've a screen with a FAB button to navigate me to AddGameActivity, when I press the FAB button this is the error message:

navigator operation requested with a context that does not include a Navigator

Now to solve this I added MaterialApp to main.dart and removed it from HomeActivity.dart like this:

main.dart:

import 'package:flutter/material.dart';
import 'HomeActivity.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: HomeActivity());
    }
}

HomeActivity:

import 'package:flutter/material.dart';
import 'AddGameActivity.dart';

class HomeActivity extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: new Text("Home")),
        floatingActionButton: FloatingActionButton(
            onPressed: () => Navigator.push(context, new MaterialPageRoute(builder: (context) => new AddGameActivity())),
            child: new Icon(Icons.add)));
  }
}

In that case when I add the Material app in main.dart it works correctly without any problem.

So my questions is WHY is this happening? in both of the ways I've a Material app which has a Scaffold inside !

Answer 1

As mentioned in the comments, this issue seems to be a duplicate of this post: "Navigator operation requested with a context that does not include a Navigator"

The reason why the error is thrown is because the Navigator is unable to access the Navigator from the MaterialApp. To solve this issue, you can either declare MaterialApp and initialize HomeActivity - like what you're doing, or you can add a Builder after initializing MaterialApp inside HomeActivity.

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HomeActivity();
  }
}

class HomeActivity extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // call Builder to access Navigator from MaterialApp
      home: Builder(
        builder: (context) => Scaffold(
            appBar: AppBar(title: Text("Home")),
            floatingActionButton: FloatingActionButton(
                onPressed: () => Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => AddGameActivity())),
                child: new Icon(Icons.add))),
      ),
    );
  }
}

class AddGameActivity extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(title: Text("AddGame")),
          floatingActionButton: FloatingActionButton(
              onPressed: () => Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) => new AddGameActivity())),
              child: new Icon(Icons.add)));
  }
}