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.

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

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


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,
),

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

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


[


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

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,

),

-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)


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

Está funcionando bien


Necesitamos proporcionar la etiqueta principal: new Container ()
siva
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.