Inicio » Blog » Flutter

25 enero, 2019

Navegación Drawer interactiva

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

Suscríbete a nuestro canal en Youtube

Suscríbirse

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 8977 veces

Compartir link del tutorial con tus amigos


Aprende más sobre Flutter

Cursos de programación

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023