Learn Navigator Basics | Navigation Fundamentals

Definition

The Navigator is a widget that manages a stack of route objects, enabling screen navigation in your Flutter app. Each time you move to a new screen, a new route is pushed onto the stack, and when you return, a route is popped off, revealing the previous screen.

To move between screens in Flutter, you use the Navigator.push and Navigator.pop methods. When you want to go to a new screen, you use Navigator.push, which adds a new route to the navigation stack. When you want to return to the previous screen, you use Navigator.pop, which removes the current route from the stack and reveals the previous one.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

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

Use Navigator.push when you want to move forward to a new screen, such as opening a details page from a list. Use Navigator.pop when you want to return to the previous screen, such as closing a details page and going back to the main list.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
            
import 'package:flutter/material.dart';

void main() => runApp(BackNavigationApp());

class BackNavigationApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Open Next Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NextScreen()),
            );
          },
        ),
      ),
    );
  }
}

class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Next Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to Home'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Note

The navigation stack keeps track of your route history, so each time you push a new screen, the previous screens remain underneath. Using Navigator.pop removes only the topmost route, allowing you to return to exactly where you left off.

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 1

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show me an example of how to use Navigator.push in code?

How do I pass data between screens using Navigator?

What happens if I press the device back button—does it use Navigator.pop automatically?

Swipe to show menu

Definition

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

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

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
            
import 'package:flutter/material.dart';

void main() => runApp(BackNavigationApp());

class BackNavigationApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Open Next Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NextScreen()),
            );
          },
        ),
      ),
    );
  }
}

class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Next Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to Home'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Note

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 1