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.