How To migrate from deprecated WillpopScope to popScope in Flutter

Hello everyone! Today, we’ll discuss how to remove the WillPopScope widget from your existing Flutter code, as it has been deprecated after version 3.12.0–1.0.pre-release.

First, let’s understand why we used the WillPopScope widget. This widget allowed us to control the device’s back button gesture. Using WillPopScope, we could display dialogues, call APIs, or perform any necessary actions based on our business requirements. The widget takes two parameters:

onWillPop: This function is where we could show any DialogueBox or call any other functions.
Child: This is the widget for the view. Here, we add the widget we want to handle when the onWillPop function is called.

Now, we will show a real example using WillPopScope that is deprecated, and then we will provide migrated code using the PopScope widget. Before getting into the coding, let’s discuss what PopScope is and why it is needed.

Android 14 introduced a new feature called Predictive Back Gesture. In short, the back gesture is now more unpredictable, and it happens immediately when the user interacts with the gesture. With predictive back, the back animation begins immediately when the user starts the gesture, and before it has been committed. There is no opportunity for the Flutter app to decide whether it’s allowed to happen at that time. It must be known ahead of time.

For this reason, PopScope is introduced. To ensure safe routing, from Just In Time (WillPopScope) to Ahead Of Time (PopScope).

WillPopScope was asynchronous, it was only triggered when the user pressed the back gesture. While PopScope is synchronous, we must make it clear whether a route is possible, even before the user’s attempt.

The PopScope widget has three parameters, and only the child is required:

canPop: This parameter can be used to disable system back gestures. It defaults to true, meaning that back gestures happen as usual.
onPopInvoked: This parameter detects system back gestures, regardless of their success. When canPop is false, the route won’t be popped, but onPopInvoked will still be called with didPop set to false. If canPop is true, the route will be popped as usual, and onPopInvoked will report didPop as true, unless the pop fails for reasons unrelated to PopScope, in which case didPop will be false. This feature allows the handling of system back gestures within Flutter’s navigation system.
child: This is a required parameter for building the Screen UI.

Now, let’s start coding. Here, we have added a coding snippet with the deprecated WillPopScope widget:

Copy to Clipboard

class NextPage extends StatelessWidget {
  Future<bool> _onWillPop(BuildContext context) async {
    return await showDialog(
          context: context,
          barrierDismissible: false, // Prevent dismiss on tap outside
          builder: (context) => AlertDialog(
            title: Text("Exit"),
            content: Text("Do you want to exit?"),
            actions: <Widget>[
              TextButton(
                onPressed: () => Navigator.of(context)
                    .pop(true), // Return true to pop the route
                child: Text(
                  "Yes",
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 18, 
       fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              TextButton(
                onPressed: () => Navigator.of(context)
                    .pop(false), // Return false to stay on the route
                child: Text(
                  "No",
                  style: TextStyle(
                    color: Colors.blue, 
                    fontSize: 18,
       fontWeight: FontWeight.bold,
                 ),
                ),
              ),
            ],
          ),
        ) ??
        false; // Handle null case by returning false (stay on the route)
  }

@override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(context), // Call the _onWillPop function
      child: Scaffold(
        appBar: AppBar(
          title: Text('Second Page'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              _onWillPop(context).then((exitConfirmed) {
                if (exitConfirmed) {
                  // Navigate back to the first page (HomePage) if exit is confirmed
                  Navigator.pop(context);
                }
              });
            },
            child: Text('Back to First Page'),
          ),  ),
      ),   
    );
  }}

After updating Flutter, this code using WillPopScope now shows a warning:
‘WillPopScope.new’ is deprecated and shouldn’t be used. Use PopScope instead. This feature was deprecated after v3.12.0-1.0.pre.

Finally, we will show how to migrate to PopScope with an existing _onWillPop function. We do not need to change our _onWillPop function; we only have to replace some code:

Copy to Clipboard

We only changed WillPopScope to PopScope and set canPop to false, and the onPopInvoked function worked perfectly.

Wrap-up

In this blog, we explored the transition from WillPopScope to PopScope, delving into its key features, technology stack, and coding intricacies. This insightful piece is brought to you by Deligence Technologies, a leader in innovative software solutions.

Deligence Technologies is a software development company that creates high-quality mobile applications. We use the latest technologies and our industry knowledge to design and build exceptional apps.

We specialize in flutter app development, if you want to learn about our flutter services, visit: Flutter Services