How to Use Navigator in Flutter for Screen Navigation

In Flutter, use the Navigator widget to move between screens by calling Navigator.push() to go to a new screen and Navigator.pop() to return. This manages a stack of routes, allowing smooth navigation in your app.

Syntax

The Navigator manages a stack of routes (screens). Use Navigator.push(context, route) to add a new screen on top, and Navigator.pop(context) to remove the current screen and go back.

context: The current widget context.
route: Defines the new screen, usually created with MaterialPageRoute.

dart

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

Example

This example shows a main screen with a button that navigates to a second screen. The second screen has a button to go back.

dart

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);
          },
        ),
      ),
    );
  }
}

Output

App with a first screen showing a button labeled 'Go to Second Screen'. When tapped, it opens a second screen with a button labeled 'Go Back' that returns to the first screen.

Common Pitfalls

• Forgetting to pass the correct context can cause errors; always use the context from a widget inside the widget tree.
• Using Navigator.pop() on the first screen will close the app or do nothing if no previous screen exists.
• Not wrapping new screens in MaterialPageRoute or similar can cause UI issues.

dart

/* Wrong: Using context from outside widget tree */
// Navigator.push(someGlobalContext, MaterialPageRoute(builder: (_) => NewScreen()));

/* Right: Use context from widget build method */
// Navigator.push(context, MaterialPageRoute(builder: (_) => NewScreen()));

Quick Reference

Here is a quick summary of Navigator methods:

Method	Description
Navigator.push(context, route)	Navigate to a new screen by adding it on top of the stack.
Navigator.pop(context)	Go back to the previous screen by removing the current one.
Navigator.pushReplacement(context, route)	Replace the current screen with a new one.
Navigator.pushNamed(context, routeName)	Navigate using named routes defined in MaterialApp.
Navigator.popUntil(context, predicate)	Pop screens until a condition is met.

Key Takeaways

Use Navigator.push() to move to a new screen and Navigator.pop() to go back.

Always use the correct BuildContext from your widget tree for navigation calls.

Wrap new screens in MaterialPageRoute for proper transitions and UI.

Avoid popping the first screen unless you want to close the app.

Use named routes for cleaner navigation in larger apps.