Why navigation manages screen transitions in Flutter - Build It to Prove It

Build: Simple Navigation Demo

This screen shows how navigation manages screen transitions by moving between two pages.

Target UI

Page 1
+------------------+
|                  |
|   Welcome Page   |
|                  |
|  [Go to Page 2]  |
+------------------+

Page 2
+------------------+
|                  |
|    Second Page   |
|                  |
|  [Back to Page 1]|
+------------------+

Create two pages: Welcome Page and Second Page

Add a button on Welcome Page to navigate to Second Page

Add a button on Second Page to navigate back to Welcome Page

Use Flutter Navigator to manage screen transitions

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: 'Navigation Demo',
      home: const WelcomePage(),
    );
  }
}

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

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

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

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

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: 'Navigation Demo',
      home: const WelcomePage(),
    );
  }
}

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

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

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

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

This app has two pages: WelcomePage and SecondPage.

On WelcomePage, the button uses Navigator.push to move to SecondPage. This adds the new page on top of the navigation stack, showing the new screen.

On SecondPage, the button uses Navigator.pop to go back. This removes the current page from the stack, returning to the previous screen.

This shows how Flutter's Navigator manages screen transitions by stacking pages and moving between them.

Final Result

Completed Screen

Welcome Page
+------------------+
|                  |
|   Welcome Page   |
|                  |
|  [Go to Page 2]  |
+------------------+

Second Page
+------------------+
|                  |
|    Second Page   |
|                  |
|  [Back to Page 1]|
+------------------+

Tap 'Go to Page 2' button to navigate from Welcome Page to Second Page

Tap 'Back to Page 1' button to return from Second Page to Welcome Page

Stretch Goal

Add a fade transition animation when navigating between pages

💡 Hint

Use PageRouteBuilder with a fade transition in Navigator.push

Practice

1.

What is the main role of navigation in a Flutter app?

easy

A. To style the app's buttons and text

B. To manage moving between different screens or pages

C. To handle data storage locally

D. To connect the app to the internet

Solution

1. Step 1: Understand navigation purpose

   Navigation is used to move users between different screens or pages in an app.

2. Step 2: Compare options

   Only To manage moving between different screens or pages describes managing screen transitions, others describe unrelated tasks.

3. Final Answer:

   To manage moving between different screens or pages -> Option B

4. Quick Check:

   Navigation = screen transitions [OK]

Hint: Navigation means moving between screens [OK]

Common Mistakes:

• Confusing navigation with styling
• Thinking navigation handles data
• Mixing navigation with internet connection

2.

Which Flutter code correctly opens a new screen called SecondPage?

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

easy

A. pop

B. remove

C. replace

D. push

Solution

1. Step 1: Identify method to open new screen

   Navigator.push is used to add a new screen on top of the stack.

2. Step 2: Check other options

   pop removes a screen, remove and replace are not standard Navigator methods for opening screens.

3. Final Answer:

   push -> Option D

4. Quick Check:

   Open new screen = Navigator.push [OK]

Hint: Use push to open new screen [OK]

Common Mistakes:

• Using pop to open screen
• Confusing remove with push
• Trying replace which is not standard

3.

What happens when this Flutter code runs?

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

medium

A. The app opens SecondPage and then immediately returns to the previous screen

B. The app crashes because pop is called without a screen

C. The app stays on the current screen without change

D. The app opens SecondPage and stays there

Solution

1. Step 1: Analyze Navigator.push

   This adds SecondPage on top of the current screen stack, showing it.

2. Step 2: Analyze Navigator.pop

   This removes the top screen (SecondPage), returning to the previous screen.

3. Final Answer:

   The app opens SecondPage and then immediately returns to the previous screen -> Option A

4. Quick Check:

   push then pop = open then close screen [OK]

Hint: push adds screen, pop removes top screen [OK]

Common Mistakes:

• Thinking pop crashes app
• Assuming pop does nothing
• Believing app stays on SecondPage

4.

Identify the error in this Flutter navigation code:

Navigator.pop();

medium

A. Missing context parameter in pop method

B. pop cannot be used to go back

C. pop requires a screen widget as argument

D. pop should be replaced with push

Solution

1. Step 1: Check Navigator.pop syntax

   Navigator.pop requires the BuildContext as the first argument to know which navigation stack to pop from.

2. Step 2: Review other options

   pop is used to go back, does not require a screen widget, and should not be replaced with push here.

3. Final Answer:

   Missing context parameter in pop method -> Option A

4. Quick Check:

   pop(context) needs context [OK]

Hint: Always pass context to Navigator methods [OK]

Common Mistakes:

• Omitting context in pop
• Thinking pop needs a widget
• Replacing pop with push incorrectly

5.

You want to open a new screen and then return data back to the previous screen when closing it. Which Flutter navigation method should you use?

hard

A. Navigator.pushReplacement to open and Navigator.pop without data

B. Navigator.pop to open and Navigator.push to return data

C. Navigator.push to open and Navigator.pop with data to return

D. Navigator.remove to open and Navigator.push to return data

Solution

1. Step 1: Understand opening with data return

   Navigator.push opens a new screen and can await returned data when that screen closes.

2. Step 2: Returning data on close

   Navigator.pop can send data back to the previous screen when popping.

3. Step 3: Check other options

   pop cannot open screens, pushReplacement replaces screen without returning data, remove is not for opening screens.

4. Final Answer:

   Navigator.push to open and Navigator.pop with data to return -> Option C

5. Quick Check:

   push opens, pop returns data [OK]

Hint: Use push to open, pop to return data [OK]

Common Mistakes:

• Using pop to open screen
• Ignoring data return with pop
• Confusing pushReplacement with push