Flutter cerrar el cajón al pulsar el botón de retroceso en la barra de navegación inferior.

Estoy construyendo una aplicación de Flutter con una barra de navegación inferior persistente que contiene un botón de menú.

Se supone que el menú debe abrir un cajón desde cualquier pantalla y, a través del botón de retroceso, debería cerrarlo.
Para eso estoy usando un “scaffold” que incluye el widget de navegación inferior y también el cajón.
Esto funciona bien para todas las pantallas a las que se puede acceder directamente a través de la barra de navegación inferior.

El problema surge si navego (estoy usando “auto_route” para el enrutamiento) a otra subpágina.
En la subpágina parece que no es posible cerrar el cajón.

En la subpágina no proporciono un “scaffold” ya que tendría “scaffolds” anidados.

Estoy usando el WillPopScope y onPop se ve así:

if (Scaffold.of(context).isEndDrawerOpen) { Navigator.of(context).pop(); }

Desafortunadamente, esto solo cierra la subpágina mientras el cajón permanece abierto.

Una solución sería pasar una función de cierre a cada pantalla secundaria (o algo similar a una clave global para el “scaffold” global), pero agradecería una solución más elegante.

¿Tienes alguna idea de cómo puedo solucionarlo?
¡Gracias de antemano!

davy.ai

July 29, 2023 at 12:41 am

Solución para cerrar el cajón en las subpáginas

Para solucionar el problema de no poder cerrar el cajón desde las subpáginas, puedes utilizar una clave global para el scaffold y utilizarla para acceder al cajón desde cualquier pantalla de tu aplicación. Aquí te mostramos cómo puedes hacerlo:

En primer lugar, crea una clave global para tu scaffold:

final GlobalKey<scaffoldstate> scaffoldKey = GlobalKey<scaffoldstate>();

Luego, pasa esta clave al widget scaffold en tu aplicación principal:

Scaffold(
    key: scaffoldKey,
    ...

Ahora, puedes acceder al scaffold desde cualquier pantalla utilizando la scaffoldKey:

if (scaffoldKey.currentState.isDrawerOpen) {
    Navigator.pop(context);
}

Esto comprobará si el cajón está abierto y luego lo cerrará al volver a la pantalla actual.

Por último, para manejar el botón de retroceso, envuelve tu widget de subpágina con un widget WillPopScope:

WillPopScope(
  onWillPop: () async {
    if (scaffoldKey.currentState.isDrawerOpen) {
      Navigator.pop(context);
      return false;
    } else {
      return true;
    }
  },
  child: SubPageWidget(),
),

Esto manejará la presión del botón de retroceso y cerrará el cajón si está abierto antes de volver a la pantalla actual.

Con esta solución, no tienes que pasar una función de cierre a cada pantalla secundaria y puedes cerrar fácilmente el cajón desde cualquier pantalla de tu aplicación.

Answer

davy.ai

July 29, 2023 at 12:41 am
Solución para cerrar el cajón en las subpáginas

Para solucionar el problema de no poder cerrar el cajón desde las subpáginas, puedes utilizar una clave global para el scaffold y utilizarla para acceder al cajón desde cualquier pantalla de tu aplicación. Aquí te mostramos cómo puedes hacerlo:
- En primer lugar, crea una clave global para tu scaffold:
```
final GlobalKey<scaffoldstate> scaffoldKey = GlobalKey<scaffoldstate>();
```
- Luego, pasa esta clave al widget scaffold en tu aplicación principal:
```
Scaffold(
    key: scaffoldKey,
    ...
```
- Ahora, puedes acceder al scaffold desde cualquier pantalla utilizando la scaffoldKey:
```
if (scaffoldKey.currentState.isDrawerOpen) {
    Navigator.pop(context);
}
```
Esto comprobará si el cajón está abierto y luego lo cerrará al volver a la pantalla actual.
- Por último, para manejar el botón de retroceso, envuelve tu widget de subpágina con un widget WillPopScope:
```
WillPopScope(
  onWillPop: () async {
    if (scaffoldKey.currentState.isDrawerOpen) {
      Navigator.pop(context);
      return false;
    } else {
      return true;
    }
  },
  child: SubPageWidget(),
),
```
Esto manejará la presión del botón de retroceso y cerrará el cajón si está abierto antes de volver a la pantalla actual.

Con esta solución, no tienes que pasar una función de cierre a cada pantalla secundaria y puedes cerrar fácilmente el cajón desde cualquier pantalla de tu aplicación.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Flutter cerrar el cajón al pulsar el botón de retroceso en la barra de navegación inferior.

Answer

davy.ai

Solución para cerrar el cajón en las subpáginas