Cajón de AppBar persistente en todas las páginas Flutter

Solución:

Hay algunas opciones diferentes para esto. El más básico es, con suerte, algo que ya haya hecho, pero lo enumeraré de todos modos:

1: crea una clase para tu cajón

Su widget debe ser su propio widget con estado o sin estado. De esta manera, solo tienes que crear una instancia cada vez.

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(...);
  }
}

Y luego, al usarlo en cada página:

Scaffold(
  drawer: MyDrawer(...),
  ...
)

Espero que ya estés haciendo esto; si no, deberías estarlo. La función de construcción de una clase no debería ser demasiado grande o puede conducir a un rendimiento deficiente y más difícil de mantener el código; dividir las cosas en unidades lógicas le ayudará a largo plazo.

2: Crea una clase para tu andamio

Si tener que incluir el mismo cajón en un andamio para cada página sigue siendo demasiado código, puede utilizar una clase que encapsule su andamio. Básicamente, tomaría entradas para cada una de las entradas de andamio que realmente usa.

class MyScaffold extends StatelessWidget {

  final Widget body;

  MyScaffold({this.body});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
     body: body,
     drawer: MyDrawer(...),
    );
  }
}

Y luego, en lugar de usar Scaffold en su código, use MyScaffold (pero por favor llámelo mejor = D).

3: andamio de varios niveles

Solo incluyo esta forma de hacerlo para que sea completo, y no lo recomiendo. Dicho esto, hay ciertas cosas en las que no puede trabajar dentro del flujo de trabajo normal de flutter que podría hacer al hacer esto, por ejemplo, si desea una animación personalizada para cuando el usuario toque diferentes elementos en el cajón.

Básicamente, lo que harías en este caso es tener un Scaffold fuera de tu MaterialApp o Navigator (lo que creo que también significaría que tendrías que tener otro Navigator fuera de eso, pero no estoy 100% seguro). Tendría que el andamio que está fuera de su navegación muestre el cajón, mientras que el otro (en cada página dentro de la navegación) haría cualquier otra cosa que necesite que haga. Hay algunas advertencias: debe asegurarse de obtener el andamio correcto (es decir, Scaffold.of(context) por sí solo no lo cortaría: tendría que obtener el contexto del primer andamio y usarlo para encontrar el de nivel superior), y probablemente necesitaría pasar una GlobalKey (del andamio de nivel inferior) al cajón para que realmente pueda cambiar las páginas dentro de él.

Como dije, no recomiendo este enfoque, así que no voy a entrar en más detalles que eso, ¡sino dejarlo como un ejercicio para el lector si quiere ir por ese agujero de conejo!

rmtmckenzie es muy correcto.

Aunque si tiene curiosidad por la solución de múltiples andamios, esta puede ser más elegante de lo que cree.

Para compartir un cajón entre todas las páginas, podríamos agregar un builder en nuestro MaterialApp ejemplo. Esto creará una instancia Scaffold debajo Navigator pero sobre todo rutas.

MaterialApp(
  title: 'Flutter Demo',
  builder: (context, child) {
    return Scaffold(
      drawer: MyDrawer(),
      body: child,
    );
  },
  home: MyHome()
)

Dentro de su página, puede crear una instancia de otra Scaffold sin restricciones como lo haría normalmente.

Luego puede mostrar el cajón compartido haciendo lo siguiente en cualquier widget debajo MaterialApp :

final ScaffoldState scaffoldState = context.rootAncestorStateOfType(TypeMatcher<ScaffoldState>());
scaffoldState.openDrawer();

Código que puede extraer en un buen ayudante:

class RootScaffold {
  static openDrawer(BuildContext context) {
    final ScaffoldState scaffoldState =
        context.rootAncestorStateOfType(TypeMatcher<ScaffoldState>());
    scaffoldState.openDrawer();
  }
}

Luego reutiliza usando RootScaffold.openDrawer(context)

Además de @ Rémi Rousselet Responder

MaterialApp(
 title: 'Flutter Demo',
 builder: (context, child) {
   return Scaffold(
     drawer: MyDrawer(),
     body: child,
   );
 },
 home: MyHome()
)

Para la navegación en el cajón raíz si usa Navigator.of(context) // push or pop que arrojará un error y para eso debe usar el widget secundario para navegar a diferentes páginas

Como eso

(child.key as GlobalKey<NavigatorState>).currentState // push or pop

Proyecto de demostración en Github

---

---

Utiliza Nuestro Buscador