Menu lateral Drawer en Flutter

¿Qué es un menu drawer? y ¿Cuál es su función en una app?

Un menu lateral o Navigation Drawer es un panel que se expande y contrae desde el lado izquierdo o derecho de la pantalla del dispositivo y muestra un menú de opciones de navegación de la aplicación; es posible mostrar el menú lateral aplicando un toque en el lado izquierdo de la pantalla y arrastrando hacia la derecha o tocando el icono de la aplicación ubicado en la barra de acciones.

En esta ocasión solo programaremos el diseño del menu en el siguiente video 9 implementaremos la interactividad del menu de opciones.

¿Cómo crear un menu lateral drawer (Diseño)?

El lenguaje Dart permite crear muy rápidamente un menu lateral, este widget los podemos usar con tanto en una app IOS como Android. Para ello debemos seguir con los siguientes pasos:

1. Para ello creamos nuestro proyecto Flutter con Android Studio
2. Limpiamos o adecuamos el código que por defecto nos trae Flutter, a nuestras caracteristicas
3. Creamos un Scaffold al cual implementamos ademas de sus propiedades el widget drawer
4. Creamos el widget drawer: con una lista listView donde implementaremos: new UserAccountsDrawerHeader para el encabezado o header  y ListTile para los items o menu de opciones

Veamos el código en Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("MENU LATERAL"),),
        drawer: MenuLateral(),
        body: Center(
          child: Text("HOME"),
        ),
      )
    );
  }
}
class MenuLateral extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return new Drawer(
      child: ListView(
        children: <Widget>[
          new UserAccountsDrawerHeader(
              accountName: Text("CODEA APP"),
              accountEmail: Text("informes@gmail.com"),
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage("https://dominio.com/imagen/recurso.jpg"),
                fit: BoxFit.cover
              )
            ),
          ),
          Ink(
            color: Colors.indigo,
            child: new ListTile(
              title: Text("MENU 1", style: TextStyle(color: Colors.white),),
            ),
          ),
          new ListTile(
            title: Text("MENU 2"),
            onTap: (){},
          ),
          new ListTile(
            title: Text("MENU 3"),
          ),
          new ListTile(
            title: Text("MENU 4"),
          )

                 ],
      ) ,
    );
  }
}

Como veen son pocas líneas de código para obtener en este caso el diseño de un menu lateral con el SDK FLUTTER  en el Lenguaje de programación DART.

En el 9no video implementaremos la interactividad con otras pantallas desde el menu de opciones creado en la barra lateral.

Leido 24621 veces