How to Deactivate or Override the Android “BACK” Button In Flutter?

• General

Sometimes in Flutter if you press the Back arrow at the bottom of the android screen, you go back to page one. You may want this button to not show up at all. So, in today’s article, we’ll see How to Deactivate or override the Android “BACK” Button in flutter?

How to Deactivate or Override the Android “BACK” Button in Flutter?

WillPopScope() –  It will prevent the page from being popped by the system. You’ll still be able to use Navigator.of(context).pop().

@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(),
        ),
      ),
    ),
  );
}

You can also take a look at the working example which is shown below.

The code snippet will look like the below:

import 'package:flutter/material.dart';

import 'dart:async';

void main() => runApp(new BackButtonOverrideDemoWidget());

class BackButtonOverrideDemoWidget extends StatefulWidget{
  @override
  BackButtonOverrideDemoWidgetState createState() => new BackButtonOverrideDemoWidgetState();
}
class BackButtonOverrideDemoWidgetState extends State <BackButtonOverrideDemoWidget> with WidgetsBindingObserver{

  //Test Variable

  bool isBackButtonActivated = false;

  //Required For WidgetsBindingObserver

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  //Function That Triggers when you hit the back key

  @override
  didPopRoute(){
    bool override;
    if(isBackButtonActivated)
      override = false;
    else
      override = true;
    return new Future<bool>.value(override);
  }

  //Build Method

  @override
  Widget build(BuildContext context) {
    return new Directionality(
    textDirection: TextDirection.ltr,
    child: new Container(
    color: (isBackButtonActivated) ? Colors.green : Colors.red,
        child: new Center(
            child: new FlatButton(
              color: Colors.white,
              onPressed: () {
              isBackButtonActivated = !isBackButtonActivated;
              setState(() {});
              },
              child: (isBackButtonActivated) ?
              new Text("DeActive the Back Button") : new Text ("Activate the Back Button"),
            )
         )
      ),
    );
  }
}

You can use future.value() to handle the back button.

bool _allow = true;

@override
Widget build(BuildContext context) {
  return WillPopScope(
    child: Scaffold(appBar: AppBar(title: Text("Back"))),
    onWillPop: () {
      return Future.value(_allow); 
      // if true allow back else block it
    },
  );
}

You can also use mixin instead of the WillPopScope Widget. This is the best approach to solve the problem rather than using WillPopScope().

final bool canPop = ModalRoute.of(context)?.canPop ?? false;

Used it like this inside appbar:

leading: ModalRoute.of(context)?.canPop ?? false
    ? IconButton(
        onPressed: () {
          Navigator.pop(context);
        },
        icon: (Platform.isAndroid)
            ? const Icon(Icons.arrow_back)
            : const Icon(Icons.arrow_back_ios),
      )
    : Container(),

Moreover, just add a container in the leading of the Appbar Widget which hides the back button.

You can also use Future.value(bool) to handle the back button.

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So, In this article, we have seen How to deactivate or override the android “BACK” button in flutter? Feel free to comment if you have any doubts regarding the articles. You can also provide your valuable insights regarding the articles.

Keep Learning !!! Keep Fluttering !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.