Navegación entre interfaces en Flutter

Cómo hacer un menu de navegación entre interfaces en Flutter

VIDEO Cómo hacer un menu de navegación entre interfaces en Flutter

Navegación entre interfaces en Flutter

Cómo hacer un menu de navegación entre interfaces en Flutter

DESCARGAR

Programación de un menu interactivo con botones e interfaces usando el SDK Flutter

Una de las partes esenciales de toda o la mayoria de aplicaciones móviles es que deban poseer un menu de opciones y este menu tenga la interactividad necesaria para navegar entre las distintas pantallas o interfaces que pueda tener la aplicación.

Aprenderemos cómo Navegar a una nueva pantalla creando una nueva ruta y publicándola en el Navigator.

Sin embargo, si tenemos que navegar a la misma pantalla en muchas partes de nuestras aplicaciones, esto puede provocar la duplicación del código. En estos casos, puede ser útil definir una “ruta con nombre” y usarla para la Navegación.

Para trabajar con rutas con nombre, podemos usar la función Navigator.pushNamed . En este ejemplo demostraremos cómo usar rutas con nombre en su lugar.

En este trozo de programación veremos un ejemplo de como implementar interactividad entre pantallas usando para ello :

Rutas:

routes: <String, WidgetBuilder>{
          "/inicio" : (BuildContext context) => Inicio(),
          "/empresa" : (BuildContext context) => Empresa(),
          "/productos" : (BuildContext context) => Productos(),
          "/contacto" : (BuildContext context) => Contacto(),
        } ,

Navigator:

En el botón RaisedButton

onPressed: () {
   Navigator.pushNamed(context, "/inicio");
},

CODIGO COMPLETO DE UNA MENU INTERACTIVO CON PANTALLAS:

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,
        ),
        routes: <String, WidgetBuilder>{
          "/inicio" : (BuildContext context) => Inicio(),
          "/empresa" : (BuildContext context) => Empresa(),
          "/productos" : (BuildContext context) => Productos(),
          "/contacto" : (BuildContext context) => Contacto(),
        } ,

        home: Inicio()
    );
  }
}
class Empresa extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text("EMPRESA"),),
      body: Center(
        child: Text("SECCIÓN EMPRESA"),
      ),
    );
  }
}
class Productos extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text("PRODUCTOS"),),
      body: Center(
        child: Text("SECCIÓN PRODUCTOS"),
      ),
    );
  }
}
class Contacto extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text("CONTACTO"),),
      body: Center(
        child: Text("SECCIÓN CONTACTO"),
      ),
    );
  }
}

class Inicio extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Container(
        padding: EdgeInsets.only(
            top: 130,
            bottom: 10,
            right: 10,
            left: 10
        ),
        decoration: BoxDecoration(
          color: Colors.indigo,
            image: DecorationImage(
                image: NetworkImage(
                    "https://cdn.passporthealthglobal.com/wp-content/uploads/2018/08/vacunas-consejos-peru.jpg"),
                alignment: Alignment.topCenter)),
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(10),
                      child: RaisedButton(
                        color: Colors.white,
                        shape: new RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0)),
                        onPressed: () {
                          Navigator.pushNamed(context, "/inicio");
                        },
                        child: SizedBox(
                          width: 100,
                          height: 100,
                          child: Center(
                            child: Text("INICIO",
                                textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: Colors.indigo,
                                fontWeight: FontWeight.w900
                              ),
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(10),
                      child: RaisedButton(
                        color: Colors.white,
                        shape: new RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0)),
                        onPressed: () {Navigator.pushNamed(context, "/empresa");},
                        child: SizedBox(
                          width: 100,
                          height: 100,
                          child: Center(
                            child: Text("EMPRESA",
                                textAlign: TextAlign.center),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(10),
                      child: RaisedButton(
                        color: Colors.white,
                        shape: new RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0)),
                        onPressed: () {Navigator.pushNamed(context, "/productos");},
                        child: SizedBox(
                          width: 100,
                          height: 100,
                          child: Center(
                            child: Text("PRODUCTOS",
                                textAlign: TextAlign.center),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(10),
                      child: RaisedButton(
                        color: Colors.white,
                        shape: new RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0)),
                        onPressed: () {Navigator.pushNamed(context, "/contacto");},
                        child: SizedBox(
                          width: 100,
                          height: 100,
                          child: Center(
                            child: Text("CONTACTO",
                                textAlign: TextAlign.center),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );

 


¿Quieres descargar el código fuente Navegación entre interfaces en Flutter?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

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

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 2647 veces | Publicado hace 1 año

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

Ver scripts de FLUTTER

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