How to Use Navigator.pop in Flutter to Close Screens

In Flutter, use Navigator.pop(context) to close the current screen and return to the previous one in the navigation stack. This method removes the top route, effectively navigating back.

Syntax

The Navigator.pop method takes the current BuildContext as a required argument and optionally a result value to send back to the previous screen.

• context: The context of the current widget, used to find the navigator.
• result (optional): A value returned to the previous screen.

dart

Navigator.pop(context);

// Or with a result
Navigator.pop(context, result);

Example

This example shows a simple app with two screens. The second screen has a button that closes it using Navigator.pop, returning 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: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Output

App with two screens: First screen has a button to open second screen; second screen has a button that closes it and returns to first screen.

Common Pitfalls

Common mistakes when using Navigator.pop include:

• Calling Navigator.pop without a valid context, causing errors.
• Trying to pop the last screen in the app, which may close the app unexpectedly.
• Not handling the optional result when expecting data back.

Always ensure the context is from a widget inside a Navigator and check if popping is possible.

dart

/* Wrong: Using context from a widget not inside Navigator */
// This can cause an error
Navigator.pop(invalidContext);

/* Right: Use context from a widget inside Navigator */
Navigator.pop(context);

Quick Reference

Navigator.pop cheat sheet:

Usage	Description
Navigator.pop(context);	Close current screen and go back
Navigator.pop(context, result);	Close screen and send result back
if (Navigator.canPop(context)) Navigator.pop(context);	Check if pop is possible before closing

Usage	Description
Navigator.pop(context);	Close current screen and go back
Navigator.pop(context, result);	Close screen and send result back
if (Navigator.canPop(context)) Navigator.pop(context);	Check if pop is possible before closing

Key Takeaways

Use Navigator.pop(context) to close the current screen and return to the previous one.

Pass an optional result to Navigator.pop to send data back to the previous screen.

Always use a valid BuildContext that belongs to a widget inside a Navigator.

Check Navigator.canPop(context) before popping to avoid errors on the root screen.

Navigator.pop removes the top route from the navigation stack, showing the previous screen.