In this article, we will see how to deactivate or override the android "Back" button in Flutter. As hybrid app developers, we frequently encounter native issues while building or managing the native side of our app. It is one of the most problematic issues that hybrid software developers face nowadays. As there are many native-based issues on the flutter side, we will be tackling the most commonly faced problem, i.e., "disabling or overriding the back button in our flutter apps."

 

How to Deactivate or Override the Android "BACK" button in Flutter ?

Also Read: How to Install Flutter on Ubuntu 20.04 LTS (Focal Fossa)

In this article, we will be focusing more on inner implementation than package-based solutions because we might face below problems in the future if we choose package-based solutions:-

• If we have implemented the package without knowing the inner logic implementation.
• The package can become deprecated in the future if it is not maintained by the package owner based on flutter and dart upgrades.

So, how do we tackle the problem at that time ? For the reasons stated above, always prioritize understanding the logic of the package and implementing it on your own. Now, let’s solve the main problem that we picked up. Here we can divide the problem in two sub problems. When coming to the above problem, we can see that there are two different cases:-

• Deactivating the native back button using Flutter
• Overriding the native back button with alternate functionality we wanted to at instead of default.

 

How to Deactivate the native Back button in Flutter ?

So, deactivating the native button in a Flutter app actually says how to disable it or have no functionality when clicking the back button. Well, in Flutter, we all know that screens are made using a predefined class called "Scaffold," which gives us a basic inner structure along with the default native navigation button for making our app according to our needs. Here’s the code that can be used for disabling the native back button:-

Here, in the above code, we can see most of the code is the same, but we have something called "WillPopScope," which is wrapped over Scaffold. Actually, the WillPopScope widget controls the functionality of the back button. And in this code, you can see that we are returning false, which instead doesn’t perform any action, such as navigating to the back or else.

 

How to Override the native Back button with alternate functionality ?

How do we override the default functionality with the functionality that we want when we press the back button ? Well, from the previous solution, most of you can guess the solution, which involves overriding the default functionality. Still, let’s solve the problem as much as we can.

Here, in the above code, instead of not performing any action when clicking on the back, it calls a function called "_DoYouWantToExitDialog()." This function shows the alert dialog box, which is intended to ask a user if he surely wants to exit the current app.

Well, there are a lot more examples that can be implemented. I hope you try learning the concept here about the native side management of apps using Flutter. Hope above solution helped you solving this error. Please let me know your feedback in the comment box.