How to implement WillPopScope in flutter

In this guide, we will learn how to implement the WillPopScope in Flutter. WillPopScope is a widget that gives us control over the back button action, allowing the current page to go back to the previous one if it meets certain requirements. This is achieved using a callback, which the widget takes in as one of its parameters.

Willpopscope is used to process whether to leave the current page. There are many ways to leave the current page in a flutter, such as the return button on AppBar and Cupertino navigation bar. Click to return to the previous page. Click the entity (virtual) return button on an Android phone to return to the previous page. This function may be particularly easy for IOS programmers to ignore I’m not sure.

We will use willpopscope in the following situations:

  1. You need to ask the user whether to exit.
  2. There are multiple navigators in the app. What we want is to let one of them exit, rather than the navigator at the bottom of the widget tree exit directly.

Properties of WillPopScope

KeyA Widget key is an identifier of the widget
child mandatory property that represents the screen widget on which the back button behavior can be controlled.
onWillPopcallback method that returns a Future value; if true, the screen can be popped; if false, the screen will not be popped out. However, the screen can still be popped by calling the Navigator. pop(context).

Let’s take an example of how we can implement the WillPopScope in our flutter application.

First, we will Wrap the Scaffold Widget to the WillPopScope Widget which looks like the given below

 return WillPopScope(
      onWillPop: () async {
        final shouldPop = await showAlert(context);
        return shouldPop ?? false;
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Blog Tutorial'),
          centerTitle: true,
          backgroundColor: Colors.teal,
        ),

In the above code, WillPopScope will take one parameter as required which is onWillPop. In this callback method, we have declared the method showAlert where the functionality of these method look like these

Future<bool?> showAlert(BuildContext context) {
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text("Do you want to exist the app"),
            backgroundColor: Colors.amber,
            actions: [
              ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context, true);
                  },
                  child: const Text('Yes')),
              ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context, false);
                  },
                  child: const Text("No"))
            ],
          );
        });
  }

Here we have used an alert dialog to close the app of our application. we have stored the method in the shouldPop variable. and check if it is null then set it to the default as false.

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Get the full snippet from here

Also read: App Theming In Flutter With Riverpod – Light/Dark Mode