Flutter Tutorials – Handling Back Button in Flutter for Android and iOS

Handling back button and providing a different functionality is always a requirement among mobile developers. Flutter also helps you to do that. Let’s see how that works.

Watch Video Tutorial

This is achieved with the help of a widget called “WillPopScope”. ‘WillPopScope‘ has a method call ‘onWillPop‘ which can be used to override the back button functionality and its very easy to use. It should return a boolean true or false. True for the default behavior.

Here is a simple example that shows an alert dialog when user presses the back button. The AlertDialog will have a ‘YES’ and a ‘NO’ button. Clicking on yes will pop the current screen. Here there is only one screen, so popping the screen will close the application in Android.

Code goes like this…

import 'package:flutter/material.dart';

class Tip5 extends StatefulWidget {
  Tip5() : super();

  final String title = "Back Button Demo";

  @override
  Tip5State createState() => Tip5State();
}

class Tip5State extends State<Tip5> {
  //

  Future<bool> _onBackPressed() {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('Are you sure?'),
            content: Text('You are going to exit the application!!'),
            actions: <Widget>[
              FlatButton(
                child: Text('NO'),
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
              ),
              FlatButton(
                child: Text('YES'),
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
              ),
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WillPopScope(
        onWillPop: _onBackPressed,
        child: Container(),
      ),
    );
  }
}

The ‘Future _onBackPressed()’ will return an alert dialog which will return true when the user taps the ‘YES’ button and pops the screen and closes the application.

Complete Source Code

Source Code is available in this link.