svolazzare rimuovere il pulsante indietro sulla barra delle applicazioni


119

Mi chiedo, se qualcuno conosce un modo per rimuovere il pulsante Indietro che viene visualizzato appBarin un'app flutter quando si utilizza Navigator.pushNamedper andare a un'altra pagina. Il motivo per cui non lo voglio in questa pagina risultante è che proviene dalla navigazione e voglio che gli utenti utilizzino logoutinvece il pulsante, in modo che la sessione ricominci.

Risposte:


141

Puoi rimuovere il pulsante Indietro passando un vuoto new Container()come leadingargomento al tuo AppBar.

Tuttavia, se ti ritrovi a farlo, probabilmente non vuoi che l'utente sia in grado di premere il pulsante Indietro del dispositivo per tornare al percorso precedente. Invece di chiamare pushNamed, prova a chiamare Navigator.pushReplacementNamedper far scomparire il percorso precedente.

Di seguito è riportato un esempio di codice completo per quest'ultimo approccio.

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(),
      },
    );
  }
}

Sì, ho confuso i miei comandi. Proverò, grazie per il tuo aiuto.
Robert

2
@Collin, pushReplacementNamed non sembra rimuovere la possibilità di tornare indietro con la freccia indietro di sistema.
Jackpap

@Collin Jackson, Elimina il pushReplacementNamed()widget della schermata precedente (e tutti i dati e gli stati dipendenti)?
Dmitriy Blokhin

@Jackpap è perché mostra davvero la freccia se c'è un percorso precedente. Se è l'unico percorso, non c'è niente a cui tornare. Nel tuo caso, utilizza il metodo Container () vuoto.
ThinkDigital

1
Il metodo del contenitore vuoto sembra risultare in uno spazio in cui sarebbe stato il pulsante Indietro, quindi il titolo della barra dell'app viene spostato leggermente. Non è ancora un metodo ideale.
Hasen

291

Credo che le soluzioni siano le seguenti

In realtà o:

  • Non voglio mostrare quel brutto pulsante indietro (:]), e quindi scegli AppBar(...,automaticallyImplyLeading: false,...):;

  • Non voglio che l'utente torni indietro - sostituendo la visualizzazione corrente - e quindi vada per Navigator.pushReplacementNamed(## your routename here ##):;

  • Non vuoi che l'utente torni indietro - sostituendo una certa vista nello stack - e quindi usa: Navigator.pushNamedAndRemoveUntil(## your routename here ##, f(Route<dynamic>)→bool); dove f è una funzione che ritorna truequando incontra l'ultima vista che vuoi mantenere nello stack (subito prima di quella nuova);

  • Non voglio che l'utente torni indietro - MAI - svuotando completamente lo stack del navigatore con: Navigator.pushNamedAndRemoveUntil(context, ## your routename here ##, (_) => false);

Saluti


8
Questa era la risposta che stavo cercando! pushReplacementNamed () non funzionava per me, ma l'utente che torna indietro MAI è quello che ha finito per funzionare! Grazie!
s.bridges

1
in effetti questa è la risposta migliore.
Jay Jeong

Grazie, ho dovuto usare "pushReplacementNamed" invece di "popAndPushNamed"
camillo777

156

Un modo semplice per rimuovere il pulsante Indietro nella AppBar è impostare automaticallyImplyLeadingsu false.

appBar: AppBar(
  title: Text("App Bar without Back Button"),
  automaticallyImplyLeading: false,
),

Grazie per il semplice
Qutbuddin Bohra

Sebbene questo sia semplice da implementare, per lo scenario dato, Navigator.pushReplacementNamedè la soluzione corretta. Quello che suggerisci è una soluzione alternativa che, se applicata in tutti gli scenari, può eventualmente inferire un comportamento sbagliato, come da qualche parte che qualcuno vorrebbe che AppBarcontinui a implicare il comportamento principale (es: pulsante di navigazione indietro)
Guilherme Matuella

35

Voglio solo aggiungere una descrizione alla risposta di @Jackpap:

automaticamenteImplyLeading:

Questo controlla se vogliamo applicare o meno il widget posteriore (widget principale) sulla barra delle applicazioni. Se il valore automaticallyImplyLeading è falso, viene assegnato automaticamente spazio al titolo e se il widget principale è vero, questo parametro non ha effetto.

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!"),
          ),
        ),
      ),
    ),
  );
}  

4

// se vuoi nascondere il pulsante Indietro usa il codice sottostante

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(),
  ),
);
}
}

// se vuoi nascondere il pulsante Indietro e interrompere l'azione pop usa il codice sottostante

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);
              },
            ),
          ],
        )
    ),
  ),
);
 }


[


3

Il widget AppBar ha una proprietà chiamata automaticallyImplyLeading. Per impostazione predefinita, il suo valore è true. Se non vuoi che Flutter crei automaticamente il pulsante Indietro per te, crea la proprietà false.

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

Per aggiungere il tuo pulsante Indietro personalizzato

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

0

Se stai navigando in un'altra pagina. Navigator.pushReplacement()può essere utilizzato. Può essere utilizzato se stai navigando dal login alla schermata principale. Oppure puoi usare.
AppBar(automaticallyImplyLeading: false)


0

Usalo per le schegge AppBar

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

Usalo per la normale Appbar

 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,

),

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

Funziona bene


dobbiamo fornire il tag iniziale: new Container ()
siva
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.