catch Android back button event on Flutter

Question

Is there any way I can catch the onBackPressed event from Android back button?

I've tried the WillPopScope but my onWillPop function only triggered when I tap on the Material back arrow button

I put it like this:

class MyView extends StatelessWidget{

Widget build(BuildContext context) {

    return new WillPopScope(
      onWillPop: () async {
        debugPrint("Will pop");
        return true;
      },
      child: ScopedModel<AppModel>(
      model: new AppModel(),
      child: new Scaffold(......

I need to catch it because somehow my screen behaved incorrectly when it came to back button pressed, it pops the screen and the screen below it, but somehow, using material back arrow button works normal.

Update:

The code works, my problem was not in the pop of this screen, but on the previous screen, I use 2 MaterialApp widgets, and somehow it gave a weird behavior.

Possible duplicate of [De-activate system back button in Flutter App (toddler navigation)](https://stackoverflow.com/questions/45916658/de-activate-system-back-button-in-flutter-app-toddler-navigation) — Rémi Rousselet, May 21 '18 at 19:20
make sure you have a single `MaterialApp` widget for you entire app. — AbdulMomen عبدالمؤمن, Jul 04 '18 at 19:21

Arnold Parge · Answer 1 · 2020-06-13T14:49:57.527

101

In order to prevent navigating back WillPopScope is the correct way and should be used as follow:

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text('Page 2'),
        ),
        body: new Center(
          child: new Text('PAGE 2'),
        ),
      ),
      onWillPop: () async {
        return false;
      },
    );
  }
}

Future<T> pushPage<T>(BuildContext context, Widget page) {
  return Navigator.of(context)
      .push<T>(MaterialPageRoute(builder: (context) => page));
}

Can call the page like:

pushPage(context, Page2());

edited Jun 13 '20 at 14:49

answered May 21 '18 at 16:33

Arnold Parge

6,684
2
30
34

2

I tried this and get the same result, it prevents the navigation from the back arrow but cannot prevent it when I push the Android back button – Rizky Andriawan May 21 '18 at 16:56
1

@RizkyAndriawan this code works even with hard back button. Please try this code first. – Arnold Parge May 21 '18 at 17:08
what if you just want to stop a process before returning back to the previous screen? I followed this example and i could stop the process but can't return back – CanCoder Jan 11 '20 at 03:01
2

Found it. According to docs(https://api.flutter.dev/flutter/widgets/WillPopScope-class.html), to return to the previous screen, onWillPop should return Future(() => true); thanks – CanCoder Jan 11 '20 at 03:03

Mitch · Answer 2 · 2021-07-19T09:19:33.243

26

This is should be helpful.

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () {
      _moveToScreen2(context, );
    },
    child: Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              _moveToScreen2(context);
            }),
        title: Text("Screen 1"),
      ),
    ),
  );
}

/**
* This is probably too thin to be in its own method - consider using
* `Navigator.pushReplacementNamed(context, "screen2")` directly
*/
void _moveToScreen2(BuildContext context) =>
    Navigator.pushReplacementNamed(context, "screen2");

edited Jul 19 '21 at 09:19

answered Jan 18 '19 at 00:05

Mitch

1,556
1
17
17

Is it possible to navigate different page when clixk device back button using this way? – BIS Tech Nov 05 '19 at 06:57
@BloodLoss Yeah, I all you'll probably have to do is change `Navigator.pushReplacementNamed(context, Routes.keySignIn);` to `Navigator.pushReplacementNamed(context, "{your-destination-route-key}");` – Mitch Nov 06 '19 at 00:49
It's working using ```Navigator.pushReplacement()``` – Leonardo Severo Dec 03 '20 at 18:38

score 19 · Answer 3 · answered Oct 18 '21 at 15:14

19

Use WillPopScope method and return false

@override
Widget build(BuildContext context) {
  return WillPopScope(
     onWillPop: () async {
        // Do something here
        print("After clicking the Android Back Button");
        return false;
     },
     child: Scaffold(
       appBar: AppBar(
          title: Text("Handling the back button"),
       ),
       body: Center(
          child: Text("Body"),
       ),
    ),
  );
}

answered Oct 18 '21 at 15:14

Thiran Hettiarachchi

329
1
5
10

The return type 'bool' isn't a 'Future', as required by the closure's – Carlos Peñaranda Jul 18 '22 at 17:55
1

This is worked as expected – khushbu Aug 16 '22 at 07:36

score 5 · Answer 4 · answered Dec 23 '20 at 05:59

5

Just adding an important point here. Please note that by using WillPopScope, we will lose the back swipe gesture on iOS.

Reference: https://github.com/flutter/flutter/issues/14203

answered Dec 23 '20 at 05:59

mzaink

261
4
10

score 4 · Answer 5 · answered May 22 '18 at 03:13

This code work for me.

I think there may be two reasons.

Child of WillPopScope is Scaffold

No return in onWillPop

return new WillPopScope(
  onWillPop: () {
    if (!_isOpened) Navigator.pop(context);
  },
  child: new Scaffold(
    key: SharedService.orderScaffoldKey,
    appBar: appBar,
    body: new Builder(
      builder: (BuildContext context) {
        return page;
      },
    ),
  ),
);

score 4 · Answer 6 · answered Aug 20 '22 at 03:49

You can use back_button_interceptor

it detects hardware back button & will be so useful specially in case of using persistent_bottom_nav_bar

@override
void initState() {
    super.initState();
    BackButtonInterceptor.add(myInterceptor);
  }

  @override
  void dispose() {
    BackButtonInterceptor.remove(myInterceptor);
    super.dispose();
  }

  bool myInterceptor(bool stopDefaultButtonEvent, RouteInfo info) {
    print("BACK BUTTON!"); // Do some stuff.
    return false;// return true if u want to stop back
  }

This is the working one. The `WillPopScope` just catch route level dismiss — MJ Studio, Oct 09 '22 at 10:49

score 2 · Answer 7 · answered Oct 04 '22 at 12:50

This is the updated code

basically, WillPopScope -> onWillPop works on the future argument we can say as when it happens then ???? so as soon the back button is pressed WillPopScope -> onWillPop gets activated and listens to the argument more specific the back button event to pop it (replace it) Most of the time I use it to show a DialogBox of Future type because it will only appear when it is needed same can be used to navigate to a new screen as well (hope so) preferred to do MaterialPage routing or named routing techniques for navigation, use WillPopScope for the hardware back button event listening (hardware = Android/IOs) to show the exit popup

code is already been given above but does not work for me so I change a little bit

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async{
      return _moveToScreen2(context);
    },
    child: Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              _moveToScreen2(context);
            }),
        title: Text("Screen 1"),
      ),
    ),
  );
}

Future<bool>_moveToScreen2(BuildContext context) =>
    Navigator.pushReplacementNamed(context, "screen2");

===============================================

What I do on Exit

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: ()=> showExitPopup(context)
    child: Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("Screen 1"),
      ),
    ),
  );
}

=========================================

On Back button Press created a dart file with the name showExitPopup

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:vexpositions/Servises/ConstantManager.dart';

Future<bool> showExitPopup(context) async{
  return await showDialog<bool>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: SizedBox(
            height: 90,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
               const Text("Want to Exit the app!"),
               const SizedBox(height:20),
               Row(
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {
                          print('yes selected');
                          exit(0);
                        },
                        style: ElevatedButton.styleFrom(
                            primary: Colors.white),
                        child: const Text("Yes", style: TextStyle(color: 
                       Colors.black)),
                      ),
                    ),
                    const SizedBox(width: 15),
                    Expanded(
                        child: ElevatedButton(
                          onPressed: () {
                            print('no selected');
                            Navigator.of(context).pop();
                          },
                          style: ElevatedButton.styleFrom(
                            primary: Colors.red.shade800,
                          ),
                          child: const Text("No", style: TextStyle(color: 
                          Colors.white)),
                        ))
                  ],
                )
              ],
            ),
          ),
        );
      });
}

great answer, thanks man – mohamed elyamani Jul 09 '23 at 14:00 — mohamed elyamani, Jul 09 '23 at 14:00

score 1 · Answer 8 · answered Jul 22 '20 at 06:39

Another way todo this is to implement a NavigatorObserver and link it to the MaterialApp:

https://api.flutter.dev/flutter/widgets/RouteObserver-class.html

You don't have to use RouteAware, you can also implement your own NavigatorObserver.

This is for example how Flutter analytics works to automatically track screen opens/closes:

        MaterialApp(
          ...
          navigatorObservers: [
           FirebaseAnalyticsObserver(analytics: analytics),
          ],
        )

FirebaseAnalyticsObserver extends the RouteObserver which itself implements NavigatorObserver.

However WillPopScope is often the easier solution

Drown · Answer 9 · 2022-10-16T09:15:48.853

Following the documentation of BackButtonListener:

/// It can be useful for scenarios, in which you create a different state in your
/// screen but don't want to use a new page for that.

https://github.com/flutter/flutter/pull/79642

e.g.

  @override
  Widget build(BuildContext context) {
    return BackButtonListener(
      onBackButtonPressed: () {
        /// todo: close search widget
        if(searchBarController.isClose()){
            return false;
        }else{
            searchBarController.close();
            return Future.value(true);
        }
      },
      child: SearchBar(controller: searchBarController),
    );
  }

score 0 · Answer 10 · answered Apr 10 '23 at 16:27

try this code snippet.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {


  DateTime? _lastPressedAt;

  @override
  Widget build(BuildContext context) {



    return WillPopScope(
      onWillPop: () async{

        bool shouldCloseApp = false;
        DateTime now = DateTime.now();
        if (_lastPressedAt == null || now.difference(_lastPressedAt!) > Duration(seconds: 2)) {
          // If this is the first time the user presses back or more than 2 seconds
          // have passed since the last press, show a message
          _lastPressedAt = now;
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('Press back again to close the app.'),
          ));
        } else {
          // If this is the second time the user presses back within 2 seconds,
          // set shouldCloseApp to true to exit the app
          shouldCloseApp = true;
        }

        return shouldCloseApp;
      },
      child: Scaffold(
        body: Container(
          child: Text("Home Page"),
        ),
      ),
    );
  }
}

catch Android back button event on Flutter

10 Answers10

Linked