Controlling Back Button Action in Flutter with WillPopScope

Mastering Navigation in Flutter: A Deep Dive into WillPopScope

As a mobile app user, you’ve likely encountered situations where you’ve accidentally navigated away from a screen or lost your place in an app. This can be frustrating, especially if you were in the middle of something important. As a developer, it’s essential to prevent such situations and ensure a seamless user experience.

In this article, we’ll explore the WillPopScope widget in Flutter, which allows you to control the back button action and prevent unintentional navigation.

What is WillPopScope?

WillPopScope is a widget that comes with the Flutter framework. It gives you 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.

How to Use WillPopScope in a Flutter App

We’ll build a sample app to demonstrate the WillPopScope widget in action. Our app will have two pages: HomeView and ContentView. We’ll use the WillPopScope widget on the ContentView to capture the back button action and perform a custom action.

Creating and Setting Up the Flutter App

First, create a new project and generate the necessary files and folders. Then, go into the main.dart file in the lib folder and delete the home widget. Return the HomeView widget, which we’ll create next.

Creating the HomeView

Create a stateless widget named HomeView. This will be the initial view for our sample application. It should contain a text and a text button. The text button will be used to navigate to the next view, which is the ContentView.

Creating the ContentView

Create another stateless widget named ContentView. This will be the widget on which we’ll use the WillPopScope.

Implementing the WillPopScope Widget

We’ll show two different methods of handling the back button action: using an AlertDialog and using a SnackBar.

Method 1: Using an AlertDialog

Wrap the Scaffold widget with the WillPopScope widget. It takes in the onWillPop callback, captures the back button action, and performs an action when the user clicks the back button. In the onWillPop callback, we’ll display an AlertDialog to the user with a question and ask them to click an action button (either Yes or No).

dart
WillPopScope(
onWillPop: () async {
final shouldPop = await showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Do you want to go back?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false),
child: Text('No'),
),
TextButton(
onPressed: () => Navigator.pop(context, true),
child: Text('Yes'),
),
],
),
);
return shouldPop ?? false;
},
child: Scaffold(
appBar: AppBar(
title: Text('ContentView'),
),
body: Center(
child: Text('ContentView'),
),
),
)


Method 2: Using a SnackBar

We’ll show how to make use of a SnackBar to show if the page should go back or not. We’ll only make adjustments to the logic in the onWillPop callback to display a SnackBar and determine if the user would be routed or not.

“`dart
WillPopScope(
onWillPop: () async {
final now = DateTime.now();
final lastBackPressed = _lastBackPressed ?? now;
final difference = now.difference(lastBackPressed);
_lastBackPressed = now;

if (difference >= Duration(seconds: 2)) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('Press the back button again to go back')),
  );
  return false;
} else {
  return true;
}

},
child: Scaffold(
appBar: AppBar(
title: Text(‘ContentView’),
),
body: Center(
child: Text(‘ContentView’),
),
),
)
“`

Testing the App

Run the command below to run the application:


flutter run


This will launch the app on your emulator or physical device. Navigate to the ContentView and press the back button to see the WillPopScope widget in action.

Conclusion

In this article, we’ve seen how to use the WillPopScope widget to control the back button action and prevent unintentional navigation. We’ve demonstrated two different methods of handling the back button action: using an AlertDialog and using a SnackBar. With this knowledge, you can create a seamless user experience and prevent users from accidentally navigating away from your app.