How to Navigate Between Screens in Flutter: Simple Guide

In Flutter, you navigate between screens using the Navigator class. Use Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen())) to go to a new screen, and Navigator.pop(context) to go back.

Syntax

Flutter uses the Navigator widget to manage screen navigation. The main methods are:

• Navigator.push(context, route): Opens a new screen by adding it to the stack.
• Navigator.pop(context): Closes the current screen and returns to the previous one.

The MaterialPageRoute creates a route that transitions to the new screen with a material design animation.

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

The app shows a first screen with a button labeled 'Go to Second Screen'. When tapped, it opens the second screen with a button labeled 'Go Back'. Tapping 'Go Back' returns to the first screen.

Common Pitfalls

Common mistakes when navigating between screens include:

• Forgetting to pass the context from the current widget, which causes errors.
• Using Navigator.push without a proper route builder, leading to blank screens.
• Not calling Navigator.pop to return, which traps users on the new screen.
• Trying to navigate before the widget tree is built, causing exceptions.

dart

/* Wrong: Missing context or wrong route */
// Navigator.push(MaterialPageRoute(builder: (context) => NewScreen())); // Missing context

/* Right: Pass context and use MaterialPageRoute */
Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen()));

Quick Reference

Here is a quick summary of navigation methods:

Method	Description
Navigator.push(context, route)	Navigate to a new screen by adding it on top.
Navigator.pop(context)	Go back to the previous screen by removing the current one.
MaterialPageRoute(builder: (context) => Widget)	Creates a route with a material design animation.
Navigator.pushReplacement(context, route)	Replace current screen with a new one.
Navigator.pushNamed(context, routeName)	Navigate using named routes (requires route setup).

Key Takeaways

Use Navigator.push with MaterialPageRoute to open a new screen.

Use Navigator.pop to return to the previous screen.

Always pass the current BuildContext when navigating.

Define routes properly to avoid blank or error screens.

Test navigation flow to ensure users can move back and forth smoothly.