Question 290992 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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?

enter image description here

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search