Navegación entre pantallas en Flutter

En el desarrollo de aplicaciones móviles, la navegación intuitiva es fundamental para mejorar la experiencia del usuario. Flutter, con su rica biblioteca de widgets y herramientas, permite crear interfaces atractivas y funcionales de manera sencilla. En este post, te guiaremos a través del proceso de creación de un menú interactivo en Flutter que te permitirá navegar sin problemas entre diferentes secciones de tu aplicación, como Inicio, Empresa, Productos y Contacto. Exploraremos un código optimizado que facilita la implementación de rutas y mejora la organización del proyecto, asegurando que tu aplicación no solo sea funcional, sino también estéticamente agradable. ¡Comencemos a construir una experiencia de usuario fluida y atractiva!

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 :

CODIGO COMPLETO DE UNA MENU INTERACTIVO CON PANTALLAS:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      initialRoute: '/',
      routes: {
        '/': (context) => Inicio(),
        '/empresa': (context) => Empresa(),
        '/productos': (context) => Productos(),
        '/contacto': (context) => Contacto(),
      },
    );
  }
}

class Inicio extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(vertical: 130, horizontal: 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(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildButton(context, "INICIO", "/"),
            _buildButton(context, "EMPRESA", "/empresa"),
            _buildButton(context, "PRODUCTOS", "/productos"),
            _buildButton(context, "CONTACTO", "/contacto"),
          ],
        ),
      ),
    );
  }

  Widget _buildButton(BuildContext context, String label, String route) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          primary: Colors.white,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          fixedSize: Size(100, 100),
        ),
        onPressed: () {
          Navigator.pushNamed(context, route);
        },
        child: Center(
          child: Text(
            label,
            style: TextStyle(color: Colors.indigo, fontWeight: FontWeight.w900),
          ),
        ),
      ),
    );
  }
}

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

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

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

Aquí tienes una explicación del código mejorado para el menú interactivo en Flutter:

Explicación del Código

El código presentado implementa un menú interactivo en Flutter utilizando rutas nombradas para navegar entre diferentes pantallas. A continuación, se detallan las secciones clave del código:

1. Importaciones y Configuración Inicial:  

   dart

   import 'package:flutter/material.dart';
   
   void main() => runApp(MyApp());
   

   Aquí importamos el paquete material.dart que proporciona componentes de Material Design y definimos la función main() que inicializa la aplicación llamando a MyApp().

2. Clase Principal MyApp:  

   dart

   class MyApp extends StatelessWidget {
     @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()
       );
     }
   }

   En esta clase, configuramos el MaterialApp, estableciendo el título y el tema de la aplicación. La propiedad routes se utiliza para definir las rutas nombradas que permiten la navegación entre diferentes pantallas. La pantalla inicial se establece en Inicio.

3. Clases de las Pantallas: Cada sección de la aplicación (Inicio, Empresa, Productos y Contacto) está representada por una clase StatelessWidget.

   • Ejemplo de la clase Inicio:  

   dart

   class Inicio extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Container(
           padding: EdgeInsets.all(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>[
               // Aquí se añaden los botones de navegación
             ],
           ),
         ),
       );
     }
   }

   Cada clase construye una interfaz simple con un Scaffold, donde se configura un fondo (en este caso, una imagen de red) y se organiza el contenido en un Column. Dentro de este Column, se pueden añadir widgets adicionales como botones de navegación.

4. Botones de Navegación: Los botones están organizados en Row y cada botón utiliza RaisedButton (o ElevatedButton en versiones más recientes de Flutter) para permitir al usuario navegar entre las diferentes pantallas.  

   dart

   RaisedButton(
     color: Colors.white,
     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
     onPressed: () {
       Navigator.pushNamed(context, "/empresa");
     },
     child: Text("EMPRESA"),
   )

   En este fragmento, al presionar el botón "EMPRESA", el usuario es llevado a la pantalla de la empresa utilizando Navigator.pushNamed, que busca la ruta correspondiente y la presenta.

5. Estilo y Diseño: El uso de Container, Padding, y Column permite un diseño responsivo y organizado. El color de fondo y la imagen de fondo se establecen en el Container, proporcionando un atractivo visual.

Leido 16996 veces | 4 usuarios