Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to write a double back button pressed to exit app using flutter

Tags:

flutter

dart

I'm new to flutter, and I saw many android apps can exit when double press back button.

The first time press back button, app shows a toast"press again to exit app". The following second press, app exits. Of course, the time between two press must be not long.

How to do it in flutter?

like image 798
Vincent Avatar asked Nov 27 '18 09:11

Vincent


People also ask

How do I close apps on Back button Flutter?

Metadata. A Flutter package that allows Android users to press the back-button twice to close the app.

How do you override back button and show exit confirm in Flutter app?

To override the back button in Flutter and show the confirmation dialog, you can use the same WillPopScope widget. Whenever you get the back button pressed callback, show the alert dialog asking for exit confirmation.

How do I exit app Flutter?

We can use the SystemNavigator. pop() to exit the application.

How do you go to the previous tab when the device back button is pressed in Flutter?

By tapping the Android back-button (or the "pop" button) each square turns blue, one by one. Only when all squares are blue, tapping the back-button once more will return to the previous screen.


2 Answers

This is an example of my code (I've used "fluttertoast" for showing toast message, you can use snackbar or alert or anything else)

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);   } 
like image 148
Andrey Turkovsky Avatar answered Sep 26 '22 06:09

Andrey Turkovsky


You can try this package.

Inside a Scaffold that wraps all your Widgets, place the DoubleBackToCloseApp passing a SnackBar:

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       home: Scaffold(         body: DoubleBackToCloseApp(           child: Home(),           snackBar: const SnackBar(             content: Text('Tap back again to leave'),           ),         ),       ),     );   } } 

The solution below must be considered deprecated because it causes a few issues that were tackled in the package mentioned. For instance, the app closes if the snack bar was dismissed by the user (see hcbpassos/double_back_to_close_app#2).

Old answer

You can also opt for a solution involving SnackBar. It's not as simple as Andrey Turkovsky's answer, but it's quite more elegant and you won't depend on a library.

class _FooState extends State<Foo> {   static const snackBarDuration = Duration(seconds: 3);    final snackBar = SnackBar(     content: Text('Press back again to leave'),     duration: snackBarDuration,   );    DateTime backButtonPressTime;    @override   Widget build(BuildContext context) {     return Scaffold(       // The BuildContext must be from one of the Scaffold's children.       body: Builder(         builder: (context) {           return WillPopScope(             onWillPop: () => handleWillPop(context),             child: Text('Place your child here'),           );         },       ),     );   }    Future<bool> handleWillPop(BuildContext context) async {     final now = DateTime.now();     final backButtonHasNotBeenPressedOrSnackBarHasBeenClosed =         backButtonPressTime == null ||             now.difference(backButtonPressTime) > snackBarDuration;      if (backButtonHasNotBeenPressedOrSnackBarHasBeenClosed) {       backButtonPressTime = now;       Scaffold.of(context).showSnackBar(snackBar);       return false;     }      return true;   } } 
like image 26
Hugo Passos Avatar answered Sep 26 '22 06:09

Hugo Passos