Flutter WillPopScope for nested Navigation

Flutter WillPopScope for Nested Navigation

Introduction

In Flutter, navigating through multiple screens can be achieved using the Navigator widget. Sometimes, you might want to control the back button behavior within a nested navigation stack. For instance, you might want to confirm with the user before allowing them to leave a screen with unsaved changes. This is where the WillPopScope widget comes into play.

What is WillPopScope?

The WillPopScope widget is a powerful tool for managing the back button behavior in Flutter. It intercepts the back button press and provides you with a way to customize its action. This can be useful for various scenarios, such as:

• Confirming unsaved changes before leaving a screen.
• Handling specific actions when the back button is pressed.
• Preventing the back button from navigating back to the previous screen in certain situations.

Implementing WillPopScope for Nested Navigation

Let’s consider a scenario where you have a screen with nested navigation. In this case, the back button behavior might need to be handled differently depending on the current screen. You can use WillPopScope to manage this:

Code Example

import 'package:flutter/material.dart';

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

class DetailScreen extends StatefulWidget {
  @override
  _DetailScreenState createState() => _DetailScreenState();
}

class _DetailScreenState extends State {
  bool _hasChanges = false;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (_hasChanges) {
          return await showDialog(
            context: context,
            builder: (context) => AlertDialog(
              title: Text('Confirm Exit'),
              content: Text('You have unsaved changes. Are you sure you want to exit?'),
              actions: [
                TextButton(
                  onPressed: () => Navigator.of(context).pop(false),
                  child: Text('No'),
                ),
                TextButton(
                  onPressed: () => Navigator.of(context).pop(true),
                  child: Text('Yes'),
                ),
              ],
            ),
          );
        } else {
          return true;
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('Detail Screen'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('You are on the Detail Screen'),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _hasChanges = true;
                  });
                },
                child: Text('Make Changes'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// Output:
// Home Screen with a button "Go to Detail".
// Upon clicking "Go to Detail", navigates to Detail Screen.
// Detail Screen shows "You are on the Detail Screen" and a button "Make Changes".
// Pressing the back button without making changes, returns to Home Screen.
// Pressing the back button after making changes shows a dialog box asking to confirm exit.
// Pressing "Yes" in the dialog box returns to Home Screen.
// Pressing "No" in the dialog box stays on Detail Screen.

Explanation

In this code, the WillPopScope is wrapped around the DetailScreen widget. It uses the onWillPop callback to define the logic for handling the back button press:

• If the user has made changes to the DetailScreen (indicated by _hasChanges being true), a confirmation dialog is shown.
• If the user chooses to leave the screen, true is returned, which pops the current route from the stack.
• If the user chooses to stay on the screen, false is returned, preventing the route from popping.
• If the user hasn’t made any changes (_hasChanges is false), true is returned directly, allowing the back button to work as usual.

Comparison: WillPopScope vs Navigator.pop

Conclusion

The WillPopScope widget is a powerful tool for customizing the back button behavior in Flutter, especially when dealing with nested navigation. It provides a way to intercept back button presses and implement specific actions based on your application’s needs. Using it effectively can significantly enhance the user experience and make your application more robust.