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