How to handle Android device BACK button press in Flutter?

Question

How can I handle device back button's onPressed() in Flutter for Android? I know that I must put a back button manually for iOS but Android device has built-in BACK button and user can press it. How to handle that?

Solution

You can use WillPopScope to achieve this.

Firstly wrap your Scaffold inside WillPopScope. I'm showing a dialog at the first page to ask confirmation for exiting the app. You can modify this according to your need.

Example:

@override
  Widget build(BuildContext context) {
    return new WillPopScope(
      child: Scaffold(
          backgroundColor: Color.fromRGBO(255, 255, 255, 20.0),
          resizeToAvoidBottomPadding: true,
          appBar: AppBar(
              elevation: 4.0,
              title:
                  Text('Dashbaord', style: Theme.of(context).textTheme.title),
              leading: new IconButton(
                icon: new Icon(Icons.arrow_back, color: Colors.white),
                onPressed: () => _onWillPop(),
              )),
          body: new Container(), // your body content
      onWillPop: _onWillPop,
    );
  }

 // this is the future function called to show dialog for confirm exit.
 Future<bool> _onWillPop() {
    return showDialog(
          context: context,
          builder: (context) => new AlertDialog(
                title: new Text('Confirm Exit?',
                    style: new TextStyle(color: Colors.black, fontSize: 20.0)),
                content: new Text(
                    'Are you sure you want to exit the app? Tap \'Yes\' to exit \'No\' to cancel.'),
                actions: <Widget>[
                  new FlatButton(
                    onPressed: () {
                      // this line exits the app.
                      SystemChannels.platform
                            .invokeMethod('SystemNavigator.pop');
                    },
                    child:
                        new Text('Yes', style: new TextStyle(fontSize: 18.0)),
                  ),
                  new FlatButton(
                    onPressed: () => Navigator.pop(context), // this line dismisses the dialog
                    child: new Text('No', style: new TextStyle(fontSize: 18.0)),
                  )
                ],
              ),
        ) ??
        false;
  }
}

In the above example I'm calling this _onWillPop() function when the user hits the BACK button and the back button in AppBar.

You can use this WillPopScope to achieve the BACK button press and perform action you want to.

Comments

[Mohsen Emami]

your solution was useful for my app and my be the correct answer of my question, but now I want to know what is the reason of what is happening in my sub-pages?

[Mohsen Emami]

Another question: why have you made the return value Future<bool> in this case? Thanks :-|

[crushman]

what if you want to pass data to the previous page on back button pressed ? I have already tried adding the data to the backbutton on the app bar and it works but back button in app bar code is not called when the physical android back button is pressed

[Amit Jangid]

You can use navigator for passing data back... Ex: Navigator.pop(context, 'dataToBePassed');