Menu lateral Drawer en Flutter

Cómo diseñar un menu lateral o drawer en Flutter

Diseño de un menu lateral en una aplicación móvil con Flutter, usaremos el widget Drawer para dar interactividad, implementaremos opciones de menu


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.

CREANDO UN MENU DRAWER (DISEÑO)

  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.

 

VIDEO Cómo diseñar un menu lateral o drawer en Flutter


Visitado 771 veces | Publicado hace 4 meses