Simplifying Flutter Navigation with WillPopScope: Best Practices and Strategies

Flutter app development has been a revolution for developers across the globe. And the magic of it lies in its widgets. This article will uncover the mystery around one such widget, WillPopScope, used extensively in Flutter.

In a world full of apps, customization is what makes yours unique. Our beloved Flutter app shines here due to its high diversity of widgets. One such class is the WillPopScope widget, which allows us to control the screen navigation of our Flutter app in a user-friendly way. So, let's dive into the Flutter WillPopScope class to unwrap the magic behind this class and see how you can leverage it to design your favorite app.

What is WillPopScope?

In the simplest terms, WillPopScope is a widget class in Flutter that registers to attempt to veto by the user to dismiss the enclosing ModalRoute. Hence, it's a helpful widget for controlling how a Flutter app responds to screen-exit attempts, commonly with the back button press event. You can intercept the actions and provide extra functionality, such as pop-up dialogs, or even cancel the action entirely.

The most significant properties of the WillPopScope widget are child and onWillPop. The child property accepts a single child widget that sits below it in the tree, while onWillPop expects a callback function that handles the back button press event.

Overview of WillPopScope in Flutter

In Flutter, the WillPopScope class is generally used in scenarios where we need confirmation from the user before exiting a screen or application. For instance, when you want to show a confirmation dialog to the user before they proceed back to the previous screen, or when developing an app like Twitter and you want to confirm whether the user has completed their tweet before exiting the current screen, WillPopScope is an excellent tool to use.

How to Use WillPopScope in Flutter

Now that we have covered the basics let's look at how to implement WillPopScope in Flutter.

The first thing we need is to set up our main class. For this example, we will use a stateless widget named MyApp. The code will look something like this:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WillPopScope Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter WillPopScope Home Page'),
    );
  }
}

As you can see, we have the entry point void main, which runs our application. The class MyApp extends the StatelessWidget and returns a MaterialApp widget with MyHomePage as the home widget.

Diving Deeper into the WillPopScope Widget

With our main class set up, it's time to implement the WillPopScope widget. First, we'll create a StatefulWidget named MyHomePage. We will initialize it later as the child of our WillPopScope widget.

Copy
1
2
3
4
5
6
7
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Now, let's focus on the real hero - WillPopScope. Here's how to encompass MyHomePage inside the WillPopScope widget:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class _MyHomePageState extends State<MyHomePage> {
  DateTime? _lastClicked; // tracking the last time the back button was clicked

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (_lastClicked == null ||
            DateTime.now().difference(_lastClicked!) > Duration(seconds: 1)) {
          _lastClicked = DateTime.now();
          return false;
        } else {
          return true;
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Text('Flutter WillPopScope Demo'),
        ),
      ),
    );
  }
}

The WillPopScope widget wraps around our Scaffold widget in the above build method. We have two parameters: onWillPop and child. The child property accepts the Scaffold widget, and onWillPop, the essential part, receives a callback.

The callback function of onWillPop is executed when the user tries to get back to the previous screen, or in simple words, they press the back button. This function returns a Future<bool> to control that back button press event. When false is returned, the app will stay on the current page and vice versa.

This sample app demonstrates Flutter WillPopScope's usefulness by handling accidental back button presses. You may have noticed it if you have used one of the thousands of other apps implementing this effective feature.

Interactive Flutter Example: Customize Your App's Exit Path

As developers, we all know that as important as understanding the mechanism of any widget, what boosts our skills is exploring and understanding a real Flutter example. So, let's create a simple application demonstrating the WillPopScope's use.

In this example, when a user wants to exit the app or return to the previous screen (an important user action referred to as a back button press event), we will display a dialog box to confirm their action.

To simplify it, the example will contain two pages, the HomePage (that we have already created) representing our initial view, and a NextPage to navigate to with a simple button. Let's create NextPage as follows:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

NextPage is a simple StatelessWidget displaying a button to navigate back to the previous screen.

Next, let's modify the _MyHomePageState a bit:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
class _MyHomePageState extends State<MyHomePage> {
  DateTime? _lastClicked;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        final now = DateTime.now();
        bool allowPop = false;
        if (_lastClicked == null || now.difference(_lastClicked!) > Duration(seconds: 1)) {
          _lastClicked = now;
          ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('Double click back button to exit'),
                  duration: Duration(seconds: 1),
                ),
          );
        } else {
          allowPop = true;
        }
        return Future<bool>.value(allowPop);
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('Go to Next Page'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => NextPage(),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

In this updated _MyHomePageState class, we added an ElevatedButton to our Home Page. When this button is clicked, it will navigate us to the next page, i.e., the NextPage we just created.

In the onWillPop callback function, we incorporated a double-click-to-exit feature. Here's how it works:

1. When the user clicks the back button for the first time, we show them a SnackBar indicating, "Double click the back button to exit." At the same time, we also record this click stamp with _lastClicked = now;.
2. If the user clicks the back button again within a second, they are returned to the previous screen. If not, the Snackbar is shown again after one second when they click.

Conclusion

Creating a user-friendly and intriguing atmosphere in your Flutter app is a fundamental need in today's development world. With the WillPopScope class in Flutter, you can now intercept button press events, especially the back button press event, and customize your app's navigation paths to boost your user experience and stand out from other apps.

WillPopScope in Flutter lets you handle the scope of user pops or accidental backpresses, making your Flutter app more interactive and precise. Whether your users want to navigate back to the previous screen or exit the app entirely, you can guide and enhance their experience following their selection and needs.

No matter what your flutter app is about, using WillPopScope will undoubtedly provide an extra edge to your app performance.

We hope you enjoyed this deep dive into the powerful WillPopScope class in Flutter! Here, we only scratched the surface. As you practice and build various app features, we are sure you will discover more exciting things you can do with WillPopScope. So, let's keep fluttering and creating fantastic apps!