How to Use Navigator.push in Flutter for Screen Navigation

In Flutter, use Navigator.push to move from one screen to another by adding a new route to the navigation stack. You call Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen())) to show the new screen and keep the previous one in the stack.

Syntax

The Navigator.push method takes two main arguments: the context and a Route object. The most common route used is MaterialPageRoute, which requires a builder function that returns the new screen widget.

• context: The current widget context.
• MaterialPageRoute: Defines the transition to the new screen.
• builder: A function that returns the widget for the new screen.

dart

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

Example

This example shows a simple app with two screens. Pressing the button on the first screen navigates to the second screen using Navigator.push. The back button returns to the first screen.

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: Text('Welcome to the second screen!')),
    );
  }
}

Output

The app shows a first screen with a button labeled 'Go to Second Screen'. When tapped, it navigates to a second screen with the title 'Second Screen' and text 'Welcome to the second screen!'. The device back button or app bar back arrow returns to the first screen.

Common Pitfalls

Common mistakes when using Navigator.push include:

• Forgetting to pass the correct context, which can cause errors or no navigation.
• Not using a MaterialPageRoute or other route, leading to navigation failure.
• Trying to push a widget that is not a full screen or missing a Scaffold, causing UI issues.

Always ensure the new screen is a complete widget with proper layout.

dart

/* Wrong: Missing MaterialPageRoute */
Navigator.push(context, SecondScreen());

/* Right: Wrap with MaterialPageRoute */
Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));

Quick Reference

Use this quick guide when navigating with Navigator.push:

Action	Code Example	Description
Navigate to new screen	Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen()));	Pushes a new screen on top of the current one.
Go back to previous screen	Navigator.pop(context);	Removes the top screen and returns to the previous.
Use named routes	Navigator.pushNamed(context, '/routeName');	Navigate using route names defined in MaterialApp.
Replace current screen	Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => NewScreen()));	Replaces current screen with a new one.

Key Takeaways

Use Navigator.push with context and MaterialPageRoute to navigate to a new screen.

Always wrap the new screen widget inside MaterialPageRoute's builder function.

Pass the correct BuildContext from a widget that is part of the current widget tree.

Use Navigator.pop to return to the previous screen.

Avoid pushing widgets that are not full screens or lack proper layout.