aleteo quitar el botón de retroceso en la barra de aplicaciones

119

Me pregunto, si alguien conoce una forma de eliminar el botón de retroceso que aparece en la appBaraplicación in a flutter cuando se usa Navigator.pushNamedpara ir a otra página. La razón por la que no lo quiero en esta página resultante es que proviene de la navegación y quiero que los usuarios usen el logoutbotón en su lugar, para que la sesión comience de nuevo.

Robert
fuente

Respuestas:

141

Puede eliminar el botón Atrás pasando un vacío new Container()como leadingargumento a su AppBar.

Sin embargo, si se encuentra haciendo esto, probablemente no desee que el usuario pueda presionar el botón de retroceso del dispositivo para volver a la ruta anterior. En lugar de llamar pushNamed, intente llamar Navigator.pushReplacementNamedpara que desaparezca la ruta anterior.

A continuación se muestra un ejemplo de código completo para el último enfoque.

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
fuente
Sí, confundí mis comandos. Lo intentaré, gracias por tu ayuda.
Robert
2
@Collin, pushReplacementNamed no parece eliminar la posibilidad de retroceder con la flecha hacia atrás del sistema.
Jackpap
@Collin Jackson, ¿Elimina el pushReplacementNamed()widget de pantalla anterior (y todos los datos y estados dependientes)?
Dmitriy Blokhin
@Jackpap eso es porque realmente muestra la flecha si hay una ruta anterior. Si es la única ruta, entonces no hay nada a lo que regresar. En su caso, use el método Container () vacío.
ThinkDigital
1
El método del contenedor vacío parece dar como resultado un espacio donde habría estado el botón Atrás, por lo que el título de la barra de aplicaciones se mueve ligeramente. Todavía no es un método ideal.
Hasen
291

Creo que las soluciones son las siguientes

En realidad, tampoco:

  • No quiero mostrar ese feo botón de retroceso (:]) y, por lo tanto, elija AppBar(...,automaticallyImplyLeading: false,...):;

  • No quiero que el usuario retroceda, reemplazando la vista actual , y así opte por Navigator.pushReplacementNamed(## your routename here ##):;

  • No quiero que el usuario regrese, reemplazando una determinada vista en la pila , y por lo tanto use: Navigator.pushNamedAndRemoveUntil(## your routename here ##, f(Route<dynamic>)→bool); donde f es una función que regresa truecuando se encuentra con la última vista que desea mantener en la pila (justo antes de la nueva);

  • No quiero que el usuario regrese, NUNCA , vaciando completamente la pila del navegador con: Navigator.pushNamedAndRemoveUntil(context, ## your routename here ##, (_) => false);

Salud

Fabio Veronese
fuente
8
¡Esta era la respuesta que estaba buscando! pushReplacementNamed () no estaba funcionando para mí, ¡pero el usuario que regresó NUNCA es lo que terminó funcionando! ¡Gracias!
s.bridge
1
de hecho, esta es la mejor respuesta.
Jay Jeong
Gracias, tuve que usar "pushReplacementNamed" en lugar de "popAndPushNamed"
camillo777
156

Una forma sencilla de eliminar el botón Atrás en la AppBar es establecer automaticallyImplyLeadingen false.

appBar: AppBar(
  title: Text("App Bar without Back Button"),
  automaticallyImplyLeading: false,
),
Jackpap
fuente
Gracias por lo simple
Qutbuddin Bohra
Si bien esto es simple de implementar, para el escenario dado, Navigator.pushReplacementNamedes la solución correcta. Lo que sugiere es una solución que, si se aplica en todos los escenarios, eventualmente puede inferir un comportamiento incorrecto, como en algún lugar donde a alguien le gustaría que AppBarcontinúe implicando el comportamiento principal (es decir, el botón de navegación hacia atrás)
Guilherme Matuella
35

Solo quiero agregar una descripción sobre la respuesta de @Jackpap:

automaticImplyLeading:

Esto verifica si queremos aplicar el widget posterior (widget principal) sobre la barra de la aplicación o no. Si automaticImplyLeading es falso, automáticamente se le da espacio al título y si el widget principal es verdadero, entonces este parámetro no tiene ningún efecto.

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
fuente
4

// si desea ocultar el botón Atrás, use el siguiente código

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 desea ocultar el botón Atrás y detener la acción emergente, use el siguiente código

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
fuente
3

El widget AppBar tiene una propiedad llamada automaticallyImplyLeading. Por defecto, su valor es true. Si no desea que Flutter cree automáticamente el botón Atrás, simplemente cree la propiedad false.

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

Para agregar su botón de retroceso personalizado

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

Use esto para astillas AppBar

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

Use esto para la barra de aplicaciones normal

 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,

),
Descuento Kobby
fuente
-1

Si navega a otra página. Navigator.pushReplacement()puede ser usado. Se puede usar si está navegando desde el inicio de sesión hasta la pantalla de inicio. O puedes usar.
AppBar(automaticallyImplyLeading: false)

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

Está funcionando bien

Siva
fuente
Necesitamos proporcionar la etiqueta principal: new Container ()
siva