Navegación Drawer interactiva

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"),
      ),
    );
  }
}

Leido 8514 veces