Menu lateral Drawer en Flutter

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

VIDEO ¿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("APPTIVAWEB"),
              accountEmail: Text("informes@gmail.com"),
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage("https://ichef.bbci.co.uk/news/660/cpsprodpb/6AFE/production/_102809372_machu.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.

 

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 9005 veces | Publicado hace 1 año

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

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

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021