Why do we need to push the context of our previous screen in flutter?

Question

Why do we need to push the context of our previous screen in flutter? Would we need this in order to keep track of the previous branch of the tree?

Why this is not working? I want to know the reason why this code is not working.

import 'package:flutter/material.dart';

void main() {
  runApp(
    FirstRoute(),
  );
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Basics',
      home: Scaffold(
        appBar: AppBar(
          title: Text('First Route'),
        ),
        body: Center(
          child: RaisedButton(
            color: Colors.amberAccent,
            child: Text('Open route'),
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(builder: (context) {
                  return Scaffold(
                    appBar: AppBar(
                      title: Text("Second Route"),
                    ),
                    body: Center(
                      child: RaisedButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: Text('Go back!'),
                      ),
                    ),
                  );
                }),
              );
            },
          ),
        ),
      ),
    );
  }
}

score 1 · Answer 1 · answered Oct 08 '20 at 19:06

You just need to break up your BuildContext into separate classes. And it's always good practice to split up different pages into different classes anyways. But not just different classes but an entirely different file.

import 'package:flutter/material.dart';

void main() {
  runApp(
    FirstRoute(),
  );
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Basics',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.amberAccent,
          child: Text('Open route'),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (childContext) {
                return Scaffold(
                  appBar: AppBar(
                    title: Text("Second Route"),
                  ),
                  body: Center(
                    child: RaisedButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text('Go back!'),
                    ),
                  ),
                );
              }),
            );
          },
        ),
      ),
    );
  }
}

It's because `FirstRoute` is the parent of the `MaterialApp` which doesn't include a navigator as part of it's `BuildContext`. Since it's the parent, it doesn't know that it needs navigation. When you separate out the page `HomePage` into another widget, then it can figure out it needs a navigator. A much more detailed explanation can be found here if this doesn't make sense: https://stackoverflow.com/a/51292613/3705348 — jaredbaszler, Oct 09 '20 at 05:42

Why do we need to push the context of our previous screen in flutter?

1 Answers1