Menu lateral 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

Visitas: 449 | Publicado:2019-01-22 13:23:31

Más publicaciones de Flutter que te pueden interesar:

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::