Flutter – Cajón de navegación

Las aplicaciones móviles que usan Material Designs tienen dos opciones principales para la navegación. Estos son a saber, las ‘Pestañas’ y los ‘Cajones’. Este artículo se centrará principalmente en los cajones. Se utiliza un cajón para proporcionar acceso a diferentes destinos y funcionalidades proporcionadas en su aplicación. Está representado por tres líneas paralelas horizontales en el extremo superior del andamio. Para usar el cajón de la aplicación, debe importar el paquete de componentes de material que es «paquete: aleteo/material.dart». El AppDrawer de navegación se divide en tres secciones: encabezado, cuerpo y pie de página. La idea es tener un navegador con un par de elementos como elementos secundarios del cajón que navegarán a diferentes destinos al ser tocados. Un cajón tiene ListView o un contenedor con ListView como sus widgets secundarios que ayudan a navegar a un destino específico.

¿Por qué cajones? 

Los cajones son muy fáciles de implementar y útiles para equilibrar diferentes funcionalidades de su aplicación móvil al mismo tiempo. Crear un cajón hace que visitar diferentes destinos en tu aplicación sea bastante fácil y manejable en gran medida, especialmente en el caso de una aplicación compleja con muchas pantallas. Puede cambiar fácilmente entre diferentes pantallas y realizar tareas. 

Sintaxis:

Cajón (
 {Clave? clave, 
 doble elevación, 
 Widget? niño, 
 String? etiqueta semántica}
) 
 

¿Cómo crear un cajón en Flutter?

Un cajón se puede configurar siguiendo 4 simples pasos: 

1. Cree un proyecto flutter : abra la terminal y navegue hasta la ubicación deseada donde desea crear su proyecto. El uso del comando «flutter create project_name» crea su proyecto flutter.

aleteo crear nombre_archivo

2. Cree un widget de andamio : dentro de la clase MyApp de su widget sin estado/con estado, devuelva un widget de andamio. Un Scaffold Widget proporciona un marco para implementar la estructura de diseño visual básica de la aplicación flutter.

Andamio (
cajón: 

);

3. Agregue un cajón dentro del andamio : establezca la propiedad del cajón del andamio en Cajón con ListView como elemento secundario o también puede agregar un Contenedor con ListView como elemento secundario. Varios ListViews contienen elementos deseados que debían mostrarse dentro del cajón. 

Andamio(
cajón: Cajón( 
//…
),);

4. Agregue una funcionalidad de cierre : Navigator se usa para implementar la funcionalidad de cierre en el cajón cuando el usuario desea cerrarlo después de tocar algún elemento. Esto se puede hacer usando

Navegador.de(contexto).pop();

Un cajón se divide en tres categorías:

1. Cajón de Navegación Estándar : Proporcionan interacción del usuario con el contenido de la pantalla y el cajón al mismo tiempo. 
2. Cajón de navegación modal : estos cajones bloquean la interacción del usuario con el resto de la pantalla y permiten que solo el usuario interactúe con el cajón.
3. Cajón de navegación inferior : son similares a los cajones de navegación modal, excepto que la orientación del cajón es hacia la sección inferior de la pantalla.

El código completo

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  static const header = 'GeeksforGeeks';
  
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: header,
      home: MyHomePage(title: header),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  
  final String title;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),
      body: const Center(
        child: Text(
          'Navigation Drawer Demo',
          style: TextStyle(fontSize: 20),
        ),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Text(
                'Navigation Drawer',
                style: TextStyle(fontSize: 20),
              ),
            ),
            ListTile(
              leading: Icon(Icons.person),
              title: const Text(' My Profile '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.book),
              title: const Text(' My Course '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.workspace_premium),
              title: const Text(' Go Premium '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.video_label),
              title: const Text(' Saved Videos '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.edit),
              title: const Text(' Edit Profile '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.logout),
              title: const Text('LogOut'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Producción: