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

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


Navegación entre interfaces en Flutter

Cómo hacer un menu de navegación entre interfaces en 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),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );

 

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

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Navegación entre interfaces en Flutter?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 1220 veces | Publicado hace 7 meses

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019