Navegación Drawer interactiva

Navegación Drawer con Flutter

VIDEO Navegación Drawer con Flutter

Navegación Drawer interactiva

Navegación Drawer con Flutter

Crear pantallas con StalesWidget, implementación de la interactividad entre pantallas con el menu de opciones Drawer

Implementaremos la interactividad entre pantallas del menu drawer...

En las aplicaciones que emplean Material Design, hay dos opciones principales de navegación: tabs y drawers. Cuando no hay suficiente espacio para sostener las pestañas, los Drawers proporcionan una alternativa práctica.

En Flutter, podemos usar el Widget Drawer en combinación con un Scaffold para ¡crear un layout con un Material Design Drawer!

Instrucciones

  1. Crea un Scaffold
  2. Agrega un drawer
  3. Añade elementos al Drawer
  4. Cierra el drawer programáticamente

 

CODIGO FUENTE DE UN MENU DE NAVEGACIÓN DRAWER EN FLUTTER

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("EMPRESA", style: TextStyle(color: Colors.white),),
              onTap: (){
                Navigator.of(context).pop();
                Navigator.of(context).push(
                  MaterialPageRoute(
                      builder:(BuildContext context) => Empresa()
                  )
                );

              },
            ),
          ),
          new ListTile(
            title: Text("PRODUCTOS"),
            onTap: (){
              Navigator.of(context).pop();
              Navigator.of(context).push(
                  MaterialPageRoute(
                      builder:(BuildContext context) => Productos()
                  )
              );

            },

          ),
          new ListTile(
            title: Text("GALERIA"),
            onTap: (){
              Navigator.of(context).pop();
              Navigator.of(context).push(
                  MaterialPageRoute(
                      builder:(BuildContext context) => Galeria()
                  )
              );

            },
          ),
          new ListTile(
            title: Text("CONTACTO"),
            onTap: (){
              Navigator.of(context).pop();
              Navigator.of(context).push(
                  MaterialPageRoute(
                      builder:(BuildContext context) => Contacto()
                  )
              );

            },
          )

                 ],
      ) ,
    );
  }
}

class Empresa extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text("EMPRESA"),),
      body: Center(
        child: Text("ESTAS EN EMPRESA"),
      ),
    );
  }
}

class Productos extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text("PRODUCTOS"),),
      body: Center(
        child: Text("ESTAS EN PRODUCTOS"),
      ),
    );
  }
}

class Galeria extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text("GALERIA"),),
      body: Center(
        child: Text("ESTAS EN GALERIA"),
      ),
    );
  }
}

class Contacto extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text("CONTACTO"),),
      body: Center(
        child: Text("ESTAS EN CONTACTO"),
      ),
    );
  }
}

 


¿Quieres el código fuente del proyecto
Navegación Drawer interactiva?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 1947 veces | Publicado hace 1 año

Más códigos de programación en FLUTTER.

Ver scripts de FLUTTER

Aprende a crear aplicaciones móviles en Android con el curso Android desde cero

VER EL CURSO ANDROID DESDE CERO

Lo último que estamos programando en el curso: Android desde Cero

Realizar pruebas debug y generar el APK de la App Hotel

Debug y generar apk

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020