Widget de cajón en Flutter

El widget de cajón se utiliza para brindar acceso a diferentes destinos y funcionalidades proporcionados en su aplicación. Está representado por tres líneas paralelas horizontales en el extremo superior del andamio. Tiene un movimiento horizontal desde el borde del Scaffold que navega por el enlace a diferentes rutas en la aplicación flutter.

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. Todos los elementos secundarios de un widget de cajón suelen estar en ListView e inicialmente, solo el encabezado de cajón está presente en la interfaz de usuario que, cuando se toca, se extiende horizontalmente.

Constructores:

Sintaxis:

Drawer({Key key, double elevation: 16.0, Widget child, String semanticLabel}) 

Propiedades:

• child: Los widgets debajo de este widget en el árbol.
• hashCode: El código hash para este objeto.
• clave: Controla cómo un widget reemplaza a otro widget en el árbol.
• runtimeType: una representación del tipo de tiempo de ejecución del objeto.
• elevación: la coordenada z en la que colocar este cajón en relación con su padre.
• semanticLabel: la etiqueta semántica del diálogo que utilizan los marcos de accesibilidad para anunciar las transiciones de pantalla cuando se abre y se cierra el cajón.

Función importante:

• build (contexto BuildContext) → Widget: este método especifica la parte de la interfaz de usuario representada por el widget. Se llama a este método cuando el widget Drawer se inserta en el árbol en un BuildContext determinado y cuando cambian las dependencias del widget Drawer .

Implementación:

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterialLocalizations(context));
  String? label = semanticLabel;
  switch (Theme.of(context).platform) {
    case TargetPlatform.iOS:
    case TargetPlatform.macOS:
      break;
    case TargetPlatform.android:
    case TargetPlatform.fuchsia:
    case TargetPlatform.linux:
    case TargetPlatform.windows:
      label = semanticLabel ?? MaterialLocalizations.of(context).drawerLabel;
  }
  return Semantics(
    scopesRoute: true,
    namesRoute: true,
    explicitChildNodes: true,
    label: label,
    child: ConstrainedBox(
      constraints: const BoxConstraints.expand(width: _kWidth),
      child: Material(
        elevation: elevation,
        child: child,
      ),
    ),
  );
}

¿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. 

Pasos para crear un cajón:
se puede configurar un cajón siguiendo 4 pasos simples:

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

 flutter create file_name 

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. 

 Scaffold(
drawer:  
);

3. Agregue un cajón dentro del scaffold:  establezca la propiedad del cajón del scaffold 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(

drawer: Drawer(
//...
),); 

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 un estado del navegador. 

Navigator.of(context).pop();

Tipos de cajón de navegación:

  Un cajón de aplicaciones 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.

Ejemplo:

import 'package:flutter/material.dart';
 
// function to trigger app build
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  final appTitle = 'Flutter Drawer Demo';
 
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    ); // MaterialApp
  }
}
 
class MyHomePage extends StatelessWidget {
  final String title;
 
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),
      body: const Center(
          child: Text(
        'A drawer is an invisible side screen.',
        style: TextStyle(fontSize: 20.0),
      )),
      drawer: Drawer(
        child: ListView(
          padding: const EdgeInsets.all(0),
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.green,
              ), //BoxDecoration
              child: UserAccountsDrawerHeader(
                decoration: BoxDecoration(color: Colors.green),
                accountName: Text(
                  "Abhishek Mishra",
                  style: TextStyle(fontSize: 18),
                ),
                accountEmail: Text("abhishekm977@gmail.com"),
                currentAccountPictureSize: Size.square(50),
                currentAccountPicture: CircleAvatar(
                  backgroundColor: Color.fromARGB(255, 165, 255, 137),
                  child: Text(
                    "A",
                    style: TextStyle(fontSize: 30.0, color: Colors.blue),
                  ), //Text
                ), //circleAvatar
              ), //UserAccountDrawerHeader
            ), //DrawerHeader
            ListTile(
              leading: const Icon(Icons.person),
              title: const Text(' My Profile '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.book),
              title: const Text(' My Course '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.workspace_premium),
              title: const Text(' Go Premium '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.video_label),
              title: const Text(' Saved Videos '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.edit),
              title: const Text(' Edit Profile '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.logout),
              title: const Text('LogOut'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ), //Deawer
    );
  }
}

Producción: