Handling Back Navigation in Flutter Using WillPopScope

One of the common requirements in mobile app development is to control what happens when a user presses the back button on Android devices or performs the system-level navigation gesture on iOS devices. In Flutter, you can achieve this functionality using the WillPopScope widget. Here, we’ll explore how to use WillPopScope to handle back navigation in your Flutter app.

What is WillPopScope?

The WillPopScope widget is a Flutter widget that allows you to intercept and control the back navigation action. When a user presses the back button or performs a system-level swipe gesture, Flutter checks for the presence of WillPopScope widgets in the widget tree and calls the onWillPop callback if one is found. This callback gives you the opportunity to decide whether to allow or prevent the back navigation.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WillPopScope Example'),
        ),
        body: MyScreen(),
      ),
    );
  }
}

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // Your custom logic here
        // Return true to allow back navigation, return false to prevent it.
        // You can add your own conditions and logic to determine whether
        // the back action should be allowed or not.
        return true;
      },
      child: Center(
        child: Text('Press the back button to trigger the onWillPop callback.'),
      ),
    );
  }
}

In this code:

• We create a basic Flutter app with an AppBar and a body.
• Inside the MyScreen widget, we wrap our content with the WillPopScope widget.
• The onWillPop callback is where you can add your custom logic to determine whether to allow or prevent the back navigation. In this example, we return true to allow it.

Customize the onWillPop Logic

Inside the onWillPop callback, you can add your own conditions and logic. For instance, you might want to ask the user for confirmation before allowing them to navigate back. You could use it to save form data or perform any necessary cleanup before leaving the screen.

onWillPop: () async {
  // Ask the user for confirmation before navigating back
  bool confirm = await showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text('Confirm Exit'),
        content: Text('Are you sure you want to exit?'),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: Text('No'),
          ),
          TextButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: Text('Yes'),
          ),
        ],
      );
    },
  );

  // Return true if the user confirms, otherwise return false
  return confirm ?? false;
},

In this updated example, we show a confirmation dialog to the user, and the onWillPop callback returns true if the user confirms and false if they cancel.

Conclusion

The WillPopScope widget in Flutter provides a powerful way to handle back navigation and control the user experience in your app. By implementing custom logic inside the onWillPop callback, you can decide whether to allow or prevent back navigation based on your app’s specific requirements.

Sreyas is a prominent software and mobile app development firm, boasting extensive expertise in UI/UX design. Our global presence allows us to offer a comprehensive range of services. Our services include data migration, database management, web hosting, infrastructure management, and more to clients worldwide.