Comment désactiver ou remplacer le bouton "RETOUR" d'Android dans Flutter?

Question

Y a-t-il un moyen de désactiver le bouton retour d'Android sur une page spécifique ?

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

Sur la pageOne, j'ai un bouton pour aller à la pageTwo :

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

Mon problème est que si je presse la flèche de retour en bas de l'écran Android, je retourne à la pageOne. Je voudrais que ce bouton ne s'affiche pas du tout. Idéalement, je voudrais qu'il n'y ait aucun moyen de sortir de cet écran sauf si l'utilisateur garde par exemple son doigt appuyé sur l'écran pendant 5 secondes. (Je suis en train d'écrire une application pour les tout-petits, et je voudrais que seuls les parents puissent naviguer hors de l'écran en question).

Answer 1

La réponse est WillPopScope. Cela empêchera la page d'être supprimée par le système. Vous pourrez toujours utiliser 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(),
        ),
      ),
    ),
  );
}

Answer 2

Comme l'a souligné Rémi Rousselet, WillPopScope est généralement la solution à adopter. Cependant, si vous développez un widget à état qui doit réagir directement au bouton de retour, vous pouvez utiliser ceci :

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

Note : Je suis l'auteur de ce package.

Answer 3

Vous pouvez utiliser Future.value(bool) pour gérer le bouton retour.

bool _allow = true;

@override
Widget build(BuildContext context) {
  return WillPopScope(
    child: Scaffold(appBar: AppBar(title: Text("Retour"))),
    onWillPop: () {
      return Future.value(_allow); // si vrai, autoriser le retour, sinon le bloquer
    },
  );
}

Answer 4

Je poste ceci ici au cas où quelqu'un le trouve et souhaite trouver un exemple simple https://gist.github.com/b-cancel/0ca372017a25f0c120b14dfca3591aa5

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 with WidgetsBindingObserver{

  //-------------------------Variable de test

  bool isBackButtonActivated = false;

  //-------------------------Nécessaire pour WidgetsBindingObserver

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

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

  //-------------------------Fonction qui se déclenche lorsque vous appuyez sur la touche de retour

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

  //-------------------------Méthode de construction

  @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("Désactiver le bouton retour") : new Text("Activer le bouton retour"),
              )
          )
      ),
    );
  }
}

Answer 5

Vous devriez utiliser la méthode popAndPushNamed au lieu de pushNamed. Elle fait sortir la route actuelle et pousse la route souhaitée.

Ceci étant dit, votre code FAB devrait ressembler à ceci

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