flutter supprimer le bouton de retour sur la barre d'applications

119

Je me demande si quelqu'un connaît un moyen de supprimer le bouton de retour qui apparaît appBardans une application flutter lorsque vous utilisez Navigator.pushNamedpour aller sur une autre page. La raison pour laquelle je ne le souhaite pas sur cette page résultante est qu'il provient de la navigation et que je souhaite que les utilisateurs utilisent le logoutbouton à la place, afin que la session recommence.

Robert
la source

Réponses:

141

Vous pouvez supprimer le bouton de retour en passant un vide new Container()comme leadingargument à votreAppBar .

Cependant, si vous vous trouvez en train de faire cela, vous ne voulez probablement pas que l'utilisateur puisse appuyer sur le bouton de retour de l'appareil pour revenir à l'itinéraire précédent. Au lieu d'appeler pushNamed, essayez d'appelerNavigator.pushReplacementNamed pour faire disparaître l'itinéraire précédent.

Un exemple de code complet pour cette dernière approche est ci-dessous.

import 'package:flutter/material.dart';

class LogoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Logout Page"),
      ),
      body: new Center(
        child: new Text('You have been logged out'),
      ),
    );
  }

}
class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Remove Back Button"),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.fullscreen_exit),
        onPressed: () {
          Navigator.pushReplacementNamed(context, "/logout");
        },
      ),
    );
  }
}

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
      routes: {
        "/logout": (_) => new LogoutPage(),
      },
    );
  }
}
Collin Jackson
la source
Oui, j'ai mélangé mes commandes. Je vais essayer, merci pour votre aide.
Robert
2
@Collin, pushReplacementNamed ne semble pas supprimer la possibilité de revenir en arrière avec la flèche de retour du système.
Jackpap
@Collin Jackson, pushReplacementNamed()dispose- t-il du widget d'écran précédent (et de toutes les données et états dépendants)?
Dmitriy Blokhin
@Jackpap c'est parce qu'il montre vraiment la flèche s'il y a un itinéraire précédent. Si c'est la seule route, alors il n'y a rien vers quoi revenir. Dans votre cas, utilisez la méthode Container () vide.
ThinkDigital
1
La méthode du conteneur vide semble entraîner un espace où le bouton de retour aurait été, de sorte que le titre de la barre d'application est légèrement déplacé. Pas encore une méthode idéale.
Hasen
291

Je crois que les solutions sont les suivantes

Vous en fait soit:

  • Je ne veux pas afficher ce vilain bouton de retour (:]), et donc optez pour AppBar(...,automaticallyImplyLeading: false,...):;

  • Je ne veux pas que l'utilisateur revienne en arrière - remplaçant la vue actuelle - et opte donc pour Navigator.pushReplacementNamed(## your routename here ##):;

  • Je ne veux pas que l'utilisateur revienne en arrière - en remplaçant une certaine vue dans la pile - et utilise donc: Navigator.pushNamedAndRemoveUntil(## your routename here ##, f(Route<dynamic>)→bool); où f est une fonction retournant truelors de la rencontre avec la dernière vue que vous souhaitez conserver dans la pile (juste avant la nouvelle);

  • Je ne veux pas que l'utilisateur revienne - JAMAIS - en vidant complètement la pile du navigateur avec: Navigator.pushNamedAndRemoveUntil(context, ## your routename here ##, (_) => false);

À votre santé

Fabio Veronese
la source
8
C'était la réponse que je cherchais! pushReplacementNamed () ne fonctionnait pas pour moi, mais le retour de l'utilisateur JAMAIS est ce qui a fini par fonctionner! Je vous remercie!
s.bridges
1
c'est en effet la meilleure réponse.
Jay Jeong
Merci, j'ai dû utiliser "pushReplacementNamed" au lieu de "popAndPushNamed"
camillo777 le
156

Un moyen simple de supprimer le bouton de retour dans l'AppBar consiste à définir automaticallyImplyLeadingsur false.

appBar: AppBar(
  title: Text("App Bar without Back Button"),
  automaticallyImplyLeading: false,
),
Jackpap
la source
Merci pour la simplicité
Qutbuddin Bohra
Bien que cela soit simple à mettre en œuvre, pour le scénario donné, Navigator.pushReplacementNamedc'est la bonne solution. Ce que vous suggérez est une solution de contournement qui, si elle est appliquée dans tous les scénarios, peut éventuellement déduire un comportement incorrect, comme quelque part que quelqu'un aimerait que le AppBarcontinue d'impliquer le comportement principal (par exemple: bouton de navigation arrière)
Guilherme Matuella
35

Je veux juste ajouter une description sur la réponse @Jackpap:

automatiquementImplyLeading:

Cela vérifie si nous voulons appliquer le widget arrière (widget principal) sur la barre d'application ou non. Si la valeur automaticImplyLeading est false, un espace est automatiquement attribué au titre et si si le widget principal est true, ce paramètre n'a aucun effet.

void main() {
  runApp(
    new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false, // Used for removing back buttoon. 
          title: new Center(
            child: new Text("Demo App"),
          ),
        ),
        body: new Container(
          child: new Center(
            child: Text("Hello world!"),
          ),
        ),
      ),
    ),
  );
}  
jitsm555
la source
4

// si vous voulez masquer le bouton retour, utilisez le code ci-dessous

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Remove Back Button'),
    
    //hide back button
    automaticallyImplyLeading: false,
   ),
  body: Center(
    child: Container(),
  ),
);
}
}

// si vous voulez masquer le bouton de retour et arrêter l'action pop, utilisez le code ci-dessous

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
 return new WillPopScope(

  onWillPop: () async => false,
  child: Scaffold(
    appBar: AppBar(
      title: Text("Second Screen"),
      //For hide back button
      automaticallyImplyLeading: false,
    ),
    body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        )
    ),
  ),
);
 }

[

ShigaSuresh
la source
3

Le widget AppBar a une propriété appelée automaticallyImplyLeading. Par défaut, sa valeur est true. Si vous ne voulez pas que le flutter crée automatiquement le bouton de retour pour vous, créez simplement la propriété false.

appBar: AppBar(
  title: Text("YOUR_APPBAR_TITLE"), 
  automaticallyImplyLeading: false,
),

Pour ajouter votre bouton de retour personnalisé

appBar: AppBar(
  title: Text("YOUR_APPBAR_TITLE"), 
  automaticallyImplyLeading: false,
  leading: YOUR_CUSTOM_WIDGET(),
),
Ahammed Hossain Shanto
la source
0

Si vous naviguez vers une autre page. Navigator.pushReplacement()peut être utilisé. Il peut être utilisé si vous naviguez de la connexion à l'écran d'accueil. Ou vous pouvez utiliser.
AppBar(automaticallyImplyLeading: false)

SR Keshav
la source
0

Utilisez ceci pour les slivers AppBar

SliverAppBar (
        automaticallyImplyLeading: false,
        elevation: 0,
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        pinned: true,
      ),

Utilisez ceci pour la barre d'applications normale

 appBar: AppBar(
    title: Text
    ("You decide on the appbar name"
    style: TextStyle(color: Colors.black,), 
    elevation: 0,
    brightness: Brightness.light,
    backgroundColor: Colors.white,
    automaticallyImplyLeading: false,

),
Remise Kobby
la source
-2
  appBar: new AppBar(title: new Text("SmartDocs SPAY"),backgroundColor: Colors.blueAccent, automaticallyImplyLeading:false,
        leading: new Container(),
      ),

Ça marche bien

siva
la source
nous devons fournir le principal: nouveau tag Container ()
siva