Flutter double back press to exit

The “double back press to exit” feature in mobile apps allows users to confirm their intention to exit the app through a two-step interaction process. After the user initiates the exit by tapping a specific area or exit button, the app enters a short confirmation time window. To complete the exit, the user must tap again within this window. If the second tap is registered, the app closes, preventing accidental exits and providing a clear user-controlled way to leave the app. If the second tap is not received within the time window, the exit process is canceled, allowing the user to continue using the app as usual.

Anatomy of Double back press to exit app

The “double tap to exit” feature in mobile apps typically involves a specific sequence of user interactions that trigger the app’s exit. Here’s an anatomy of how this feature is commonly implemented:

Single Tap:
The user interacts with the app as they normally would, performing various tasks, navigating through different screens, or viewing content.

Identification of Intent:
When the user decides to exit the app, they initiate the process by tapping a specific area on the screen or a designated exit button/icon. This first tap is crucial in signaling the intent to exit.

Confirmation Time Window:
After the initial tap, the app enters a short time window (usually a few seconds) during which it waits for the second tap.

Second Tap:
To confirm the exit, the user must tap again within the designated time window. This second tap is what triggers the actual exit of the app.

App Exit:
Once the app registers the second tap within the confirmation time window, it initiates the process of closing the app and returning the user to the device’s home screen or the previous app they were using.

Timeout and Cancellation:
If the user doesn’t perform the second tap within the time window, the “double tap to exit” process is canceled. The app will continue running normally, allowing the user to stay within the app.

How to double back press to exit in Flutter

DateTime currentBackPressTime;

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: WillPopScope(child: getBody(), onWillPop: onWillPop),
  );
}

Future<bool> onWillPop() {
    DateTime now = DateTime.now();
    if (currentBackPressTime == null || 
        now.difference(currentBackPressTime) > Duration(seconds: 2)) {
      currentBackPressTime = now;
      Fluttertoast.showToast(msg: exit_warning);
      return Future.value(false);
    }
    return Future.value(true);
  }

Breakdown of the code:

1. `DateTime currentBackPressTime;`: This line declares a variable `currentBackPressTime` of type `DateTime`. This variable will be used to store the timestamp of the last back button press.

2. The `build` method returns a `Scaffold` widget, which is a basic structure for implementing Material Design visual layout structure in Flutter apps. The `body` property is set to `WillPopScope`, which is a widget that allows you to intercept and handle the back button press events.

3. The `onWillPop` function is called when the user presses the back button. It’s a callback that returns a `Future<bool>`.

4. Inside the `onWillPop` function:

   – `DateTime now = DateTime.now();`: This line gets the current timestamp and stores it in the variable `now`.

   – The following condition checks if `currentBackPressTime` is null (i.e., no previous back button press) or if the time difference between the current timestamp (`now`) and the last back button press (`currentBackPressTime`) is greater than 2 seconds. If this condition is true, it means the user hasn’t tapped the back button within the last 2 seconds.

   – If the condition is true, it sets `currentBackPressTime` to the current timestamp (`now`), showing that the user has initiated the exit process. It then displays a toast message using `Fluttertoast` to inform the user to tap again to exit.

   – It returns `Future.value(false)` to indicate that the app should not be popped (closed) at this moment, effectively preventing the immediate exit.

5. If the user taps the back button again within the 2-second time frame, the `onWillPop` function will be called again. This time, the time difference between the current timestamp (`now`) and the last back button press (`currentBackPressTime`) will be less than 2 seconds, and the following condition will evaluate to false.