How to disable back button in Flutter App

The default behaviour of back button of android (Which is at bottom of screen) is that it will pop a screen and went back to previous screen. Sometime we want to modify this behaviour according to our requirement, or want to disable this behaviour. In this tutorial we will learn how disable back button in flutter.

Why Disable Back Button?

Sometime the users of our app press back button accidently, and become out from our App. Which is not a good user experience. To prevent this, we should disable the back button on the home screen of our App. And override the behavior of this button. The best user experience to prevent this, is that we should show an alert dialog on press the back button which will ask to user that ‘Are you sure you want to exit this App?’. If user select yes then we will pop that screen otherwise we will dismiss the dialog.

Another bad user experience is that when user fill a large form in our app and accidently press the back button. All the filled information lost. Now he hast to fill that information again. Which is very frustrating for him. To overcome this problem we have to show alert dialog on press on back button instead of pop the screen.

How to disable back button and override its behavior?

To disable the back button and prevent to perform its default job we need to warp this whole screen with WillPopScope widget. This widget has a parameter onWillPop. This parameter does the work for us. We will return false from this method. This will prevent from pop the screen when we click on back button.

Here is how it works:

Code

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController dateInputController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return false;
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Tutorial'),
        ),
        body: const Center(child: Text('Back Button is disabled')),
      ),
    );
  }
}

Let’s explore the above code. Here you can see that we wrap the scaffold, which is our parent widget, with WillPopScope Widget. WillPopScope widget has a parameter ‘onWillPop’. This parameter does the work for us, it will not let the back button to perform its default action. We can also override this default action with our desired action. For example I want to show snackbar message on click on back button.

Let’s do it.

Just modify the onWillPop method

onWillPop: () async {
  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text(
      'You cannot go back because back button is disabled')));
  return false;
},

Output

Here we override the functionality of back button. And restrict the use to go back on previous screen. If user comes on this screen, he can’t go back to previous screen. Even this is very frustrating for him. We should let him go back with an alert dialog. The alert dialog will be the decision taking time for him to take decision that he want move back to previous screen or want to stay here. Let’s do it

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController dateInputController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return _onWillPop();
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Tutorial'),
        ),
        body: const Center(child: Text('Back Button is disabled')),
      ),
    );
  }

  Future<bool> _onWillPop() async {
    return (await showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: const Text('Back'),
                content: const Text('Are you sure you want to go back?'),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop(false);
                    }, //<-- SEE HERE
                    child: Text('No'),
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop(true);
                    }, //<-- SEE HERE
                    child: const Text('Yes'),
                  ),
                ],
              );
            }) ??
        false);
  }
}

Output

Here we have show an alert dialog which ask the user to take decision whether he want to go back or want to stay at this screen. If he pressed no button, then he will stay on this screen. If he pressed yes button, he will go back to previous screen.

Conclusion

In this tutorial we have learned how to disable the back button of android mobile screen in Flutter. And how to override the default behavior of back button. Hope you are now able to do this work in your App. Thank you for reading.