Menu lateral Drawer en Flutter

Diseño de una menu lateral o Drawer FLUTTER

¿Cómo diseñar un menú drawer o menú lateral en Flutter?

Para implementar un Drawer usaremos el widget Drawer en el Scaffold declarándolo, esto para dar interactividad además agregaremos un menú de opciones.

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

 

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 20721 veces

Aprende más sobre FLUTTER

Codea App
Codea App FullStack

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022