Flutter(Dart) physical back button disable or custom action/event.

This article is for everyone who is interested in disabling the physical back button on the Android Device in a Flutter mobile application. You can also use the following code to add your custom code to the back button. This means modifying the code to your desires. Of cause, you can also use the code in the FlutterFlow environment.

First, let’s see what the back button is see here in the screenshot for clarification.

For disabling this button add the following code to the desired view, where you would like to disable the button add.

  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: () async => false,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text("data"),
          leading: new IconButton(
            icon: new Icon(Icons.ac_unit),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
      ),
    );
  }

There is also the possibility to include the disable button feature as a widget and then add the widget in the view of your desired view. Use the following code then:

class OverwriteBackButtonWidget extends StatefulWidget {
  const OverwriteBackButtonWidget({
    Key key,
    this.width,
    this.height,
  }) : super(key: key);
final double width;
  final double height;
@override
  _OverwriteBackButtonWidgetState createState() =>
      _OverwriteBackButtonWidgetState();
}
class _OverwriteBackButtonWidgetState extends State<OverwriteBackButtonWidget> {
  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: () async => false,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text("data"),
          leading: new IconButton(
            icon: new Icon(Icons.ac_unit),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
      ),
    );
  }
}

If those code snipped did not work there is also the possibility to clear the navigation history. Therefore use the code here:

Navigator.pushNamedAndRemoveUntil(context, "/login", (Route<dynamic> route) => false);

Here we are using a named route “/login” and removing all the Navigation history expect of the view with the route “/login”. If you bind this code to a onClick event of a button the user should be forwarded to the login and all the history is cleared.

If you don’t have named routes eg. routes without names. Please address the widgets with the following code:

import '../view_report_list/view_report_list_widget.dart';
...
Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(
                  builder: (BuildContext context) =>
                      ViewReportListWidget()),
             (Route<dynamic> route) => false);

Please keep in mind that you have to change the “ViewReportListWidget” to your view name. Also change the import. Here we are using the view “ViewReportListWidget” in the “view_report_list_widget.dart” file. Soo change this if you are using the code.

I want to end this article with a function, which allows you to remove the navigation history on a click event. Here is the code:

import '../view_report_list/view_report_list_widget.dart';
Future resetBackButton(BuildContext context) async {
  /* Navigator
     .pushNamedAndRemoveUntil(context,
        "/login",
        (Route<dynamic> route) => false
     );
  */ 
  Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(
                  builder: (BuildContext context) =>
                      ViewReportListWidget()),
             (Route<dynamic> route) => false);
}

I hope the code helped. Happy coding!