How to disable backward button on web browser in flutter web WillPopScope Deprecated

Question

I want to disable or at least change the page that the app return to when pressing the backward button on web browser, Willonscope used to work but now that it is deprecated, I tried Popscope but it did not detect the backward button being pressed. The app is using GETX as a router and flutter 3.16. can anyone help me?

Widget build(BuildContext context) {
return PopScope(
  canPop: true,
  onPopInvoked: (bool didPop) {
    Logger().w(didPop);
    if (didPop) {
      Logger().w("DIDPOP");
    }
    TokenDataModel.clearSharedPreferences();
  },
  child: Scaffold(
    body: Row(
      children: [
        Expanded(
          child: Container(
            height: double.infinity,
            decoration: const BoxDecoration(
              color: primary,
            ),
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Expanded(
                  child: Center(
                    child: Text(
                      "Reset Pin",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 48,
                        color: Colors.white,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ),
                ),
                Image(
                  image: AssetImage("assets/images/students-602x451.png"),
                )
              ],
            ),
          ),
        ),
        Flexible(
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(32),
              constraints: const BoxConstraints(
                maxWidth: 400,
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const Image(
                    image: AssetImage("assets/images/logo-325x106.png"),
                    width: 325,
                    height: 106,
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  const Text(
                    "Change PIN",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const SizedBox(
                    height: 50,
                  ),
                  const Text(
                    "PIN",
                    textAlign: TextAlign.start,
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  TextField(
                    maxLength: 6,
                    keyboardType: TextInputType.number,
                    obscureText: true,
                    controller: controller.pin,
                    decoration: const InputDecoration(
                      hintText: "Input 6 PIN",
                    ),
                    onChanged: (value) => controller.onChange(),
                  ),
                  const SizedBox(
                    height: 40,
                  ),
                  const Text(
                    "Repeat Pin",
                    textAlign: TextAlign.start,
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  TextField(
                    maxLength: 6,
                    keyboardType: TextInputType.number,
                    obscureText: true,
                    controller: controller.pinConfirm,
                    decoration: const InputDecoration(
                      hintText: "Input your 6 PIN again",
                    ),
                    onChanged: (value) => controller.onChange(),
                  ),
                  const SizedBox(
                    height: 40,
                  ),
                  Center(
                    child: OutlinedButton(
                      onPressed: controller.save,
                      child: const Text("Save"),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

Edit:Added the page code I am making

Answer 1

The class WillPopScope was deprecated after v3.12.0-1.0.pre, you can use PopScope instead.

PopScope(
  // If canPop is false, then a system back gesture will not pop the route off of the enclosing Navigator.
  // onPopInvoked will still be called, and didPop will be false.
  // If canPop is true, then a system back gesture will cause the enclosing Navigator to receive a pop as usual.
  // onPopInvoked will be called with didPop as true, unless the pop failed for reasons unrelated to PopScope, in which case it will be false.
  canPop: false,
  onPopInvoked: (bool didPop) {
    if (didPop) {
      return;
    }
    _showBackDialog();
  },
  child: TextButton(
    onPressed: () {
      _showBackDialog();
    },
    child: const Text('Go back'),
  ),
),

Check PopScope Docs for more specific informations.

Answer 2

You can do like this :

AppBar(
      automaticallyImplyLeading: false

------
)

this will not add any back button automitically in the pages .

for hidding the appbar you can do color transparent elevation 0