Navigator.push and pop in Flutter - Mini App: Build & Ship

Build: Simple Navigation Demo

This app has two screens. The first screen has a button to go to the second screen. The second screen has a button to go back to the first screen.

Target UI

Screen 1:
+---------------------+
|    Simple Nav Demo  |
|                     |
|   [Go to Screen 2]  |
|                     |
+---------------------+

Screen 2:
+---------------------+
|     Screen Two       |
|                     |
|   [Go Back]          |
|                     |
+---------------------+

Screen 1 with a button labeled 'Go to Screen 2'.

When the button is tapped, navigate to Screen 2 using Navigator.push.

Screen 2 with a button labeled 'Go Back'.

When the button is tapped, navigate back to Screen 1 using Navigator.pop.

Starter Code

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Nav Demo',
      home: const ScreenOne(),
    );
  }
}

class ScreenOne extends StatelessWidget {
  const ScreenOne({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Nav Demo')),
      body: Center(
        // TODO: Add a button to navigate to ScreenTwo
      ),
    );
  }
}

class ScreenTwo extends StatelessWidget {
  const ScreenTwo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen Two')),
      body: Center(
        // TODO: Add a button to go back to ScreenOne
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Nav Demo',
      home: const ScreenOne(),
    );
  }
}

class ScreenOne extends StatelessWidget {
  const ScreenOne({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Nav Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const ScreenTwo()),
            );
          },
          child: const Text('Go to Screen 2'),
        ),
      ),
    );
  }
}

class ScreenTwo extends StatelessWidget {
  const ScreenTwo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen Two')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

We created two screens: ScreenOne and ScreenTwo. On ScreenOne, the button uses Navigator.push to open ScreenTwo. This means the app moves forward to the new screen.

On ScreenTwo, the button uses Navigator.pop to go back to the previous screen, which is ScreenOne. This is like pressing the back button.

This simple navigation shows how to move between screens in Flutter using the Navigator stack.

Final Result

Completed Screen

Screen 1:
+---------------------+
|    Simple Nav Demo  |
|                     |
|   [Go to Screen 2]  |
|                     |
+---------------------+

Screen 2:
+---------------------+
|     Screen Two       |
|                     |
|   [Go Back]          |
|                     |
+---------------------+

Tap 'Go to Screen 2' button on Screen 1 to open Screen 2.

Tap 'Go Back' button on Screen 2 to return to Screen 1.

Stretch Goal

Add a SnackBar message on ScreenTwo when the user returns to ScreenOne.

💡 Hint

Use Navigator.pop with a result and show the SnackBar in ScreenOne using ScaffoldMessenger.

Practice

1. What does Navigator.push do in a Flutter app?

easy

A. It clears all screens and shows a blank page.

B. It closes the current screen and returns to the previous one.

C. It restarts the app from the first screen.

D. It opens a new screen on top of the current one.

Solution

1. Step 1: Understand Navigator.push purpose

   Navigator.push adds a new screen on top of the current screen stack.

2. Step 2: Compare with other Navigator methods

   Navigator.pop removes the current screen, but push opens a new one.

3. Final Answer:

   It opens a new screen on top of the current one. -> Option D

4. Quick Check:

   Navigator.push = Open new screen [OK]

Hint: Push means add a new screen on top [OK]

Common Mistakes:

• Confusing push with pop
• Thinking push closes screens
• Assuming push restarts app

2. Which of the following is the correct syntax to open a new screen called SecondPage using Navigator.push?

easy

A. Navigator.push(SecondPage());

B. Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));

C. Navigator.push(context, SecondPage());

D. Navigator.push(MaterialPageRoute(SecondPage));

Solution

1. Step 1: Recall Navigator.push syntax

   Navigator.push requires context and a route, usually MaterialPageRoute with a builder function.

2. Step 2: Match syntax with options

   Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage())); correctly uses context and MaterialPageRoute with builder returning SecondPage.

3. Final Answer:

   Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage())); -> Option B

4. Quick Check:

   Correct Navigator.push syntax = Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage())); [OK]

Hint: Navigator.push needs context and MaterialPageRoute builder [OK]

Common Mistakes:

• Omitting context parameter
• Passing widget directly instead of route
• Wrong order or missing builder function

3. What will happen when the following code runs inside a button's onPressed callback?

Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
Navigator.pop(context);

medium

A. The app opens SecondPage and then immediately closes it, returning to the first screen.

B. The app opens SecondPage and stays there.

C. The app crashes due to calling push and pop together.

D. Nothing happens because pop cancels push.

Solution

1. Step 1: Analyze Navigator.push call

   Navigator.push opens SecondPage on top of current screen.

2. Step 2: Analyze Navigator.pop call immediately after

   Navigator.pop closes the current screen, which is SecondPage just opened.

3. Final Answer:

   The app opens SecondPage and then immediately closes it, returning to the first screen. -> Option A

4. Quick Check:

   push then pop = open then close screen [OK]

Hint: Push adds screen, pop removes current screen [OK]

Common Mistakes:

• Assuming both happen simultaneously without effect
• Thinking pop cancels push before opening
• Believing app crashes on push-pop sequence

4. Identify the error in this code snippet that tries to open SecondPage and then close the current screen:

Navigator.push(MaterialPageRoute(builder: (context) => SecondPage()));
Navigator.pop(context);

medium

A. Missing context parameter in Navigator.push call.

B. Navigator.pop should be called before Navigator.push.

C. MaterialPageRoute cannot be used with Navigator.push.

D. SecondPage must be a StatefulWidget.

Solution

1. Step 1: Check Navigator.push parameters

   Navigator.push requires context as the first argument, missing here.

2. Step 2: Confirm other parts are correct

   MaterialPageRoute usage and pop call are correct; SecondPage widget type is unrelated.

3. Final Answer:

   Missing context parameter in Navigator.push call. -> Option A

4. Quick Check:

   Navigator.push needs context first [OK]

Hint: Navigator.push always needs context first [OK]

Common Mistakes:

• Forgetting to pass context to push
• Thinking pop order matters here
• Confusing widget type requirements

5. You want to open a new screen DetailsPage and pass back a result string when it closes. Which code correctly opens DetailsPage and waits for the result using Navigator.push and pop?

hard

A. final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => DetailsPage()));
Navigator.pop(context, result);

B. Navigator.push(context, DetailsPage());
Navigator.pop(context, 'result');

C. final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => DetailsPage()));
// Use result after this line

D. Navigator.pop(context);
final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => DetailsPage()));

Solution

1. Step 1: Understand Navigator.push with await

   Navigator.push returns a Future that completes when the pushed screen pops with a result.

2. Step 2: Use the result after awaiting push

   final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => DetailsPage())); // Use result after this line correctly awaits push and then uses the result; pop with result happens inside DetailsPage.

3. Final Answer:

   final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => DetailsPage())); // Use result after this line -> Option C

4. Quick Check:

   Await push to get pop result [OK]

Hint: Await push to receive pop result from new screen [OK]

Common Mistakes:

• Calling pop immediately after push in same code
• Passing widget directly instead of route
• Not awaiting push to get result