为什么“使用不包含导航器的上下文请求导航器操作”

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)));
  }
}