Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to deactivate or override the Android "BACK" button, in Flutter?

Tags:

flutter

Is there a way to deactivate the Android back button when on a specific page?

class WakeUpApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Time To Wake Up ?",
      home: new WakeUpHome(),
      routes: <String, WidgetBuilder>{
        '/pageOne': (BuildContext context) => new pageOne(),
        '/pageTwo': (BuildContext context) => new pageTwo(),
      },
    );
  }
}

On pageOne I have a button to go to pageTwo:

new FloatingActionButton(
  onPressed: () {    
    Navigator.of(context).pushNamed('/pageTwo');
  },
)

My problem is that if I press the Back arrow at the bottom of the android screen, I go back to pageOne. I would like this button to not show up at all. Ideally, I would like to have no possible way out of this screen unless the user for example keeps his finger pressed on the screen for 5 seconds. (I am trying to write an App for toddlers, and would like only the parents to be able to navigate out of the particular screen).

like image 234
Jackpap Avatar asked Oct 17 '22 07:10

Jackpap


People also ask

How do I customize my back button in Flutter?

To add custom back button in Flutter AppBar You Just need to Use Leading in AppBar and Use IconButton for leading Just like this. To add custom back button in Flutter AppBar You Just need to Use Leading in AppBar and Use IconButton for leading Just like this.

What is the use of WillPopScope in Flutter?

What is the WillPopScope widget? The WillPopScope widget comes with the Flutter framework. It gives us control over the back button action, allowing the current page to go back to the previous one if it meets certain requirements. This is achieved using a callback, which the widget takes in as one of its parameters.

How do you use onWillPop in Flutter?

onWillPop: onWillPop is a callback method that returns a Future value; if true, the screen can be popped; if false, the screen will not be popped out. However, the screen can still be popped by calling the Navigator. pop(context).


2 Answers

The answer is 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(),
        ),
      ),
    ),
  );
}
like image 385
Rémi Rousselet Avatar answered Oct 18 '22 20:10

Rémi Rousselet


As Rémi Rousselet pointed out, WillPopScope is usually the way to go. However, if you are developing a stateful widget that should react to the back button directly, you may use this:

https://pub.dartlang.org/packages/back_button_interceptor

Note: I am the author of this package.

like image 51
MarcG Avatar answered Oct 18 '22 19:10

MarcG