El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Navegación Básica

Siguiente ►
►

En este tema, aprenderemos los conceptos fundamentales de la navegación en Flutter. La navegación es un aspecto crucial en el desarrollo de aplicaciones móviles, ya que permite a los usuarios moverse entre diferentes pantallas o vistas dentro de la aplicación.

Contenidos

  1. Introducción a la Navegación
  2. Navegación con Navigator
  3. Navegación con Rutas
  4. Ejemplo Práctico
  5. Ejercicios Prácticos
  6. Conclusión

Introducción a la Navegación

En Flutter, la navegación se maneja principalmente a través del widget Navigator. Este widget gestiona una pila de rutas, donde cada ruta representa una pantalla o vista en la aplicación. La navegación implica empujar (push) y sacar (pop) rutas de esta pila.

Navegación con Navigator

El widget Navigator proporciona varios métodos para manejar la navegación:

  • Navigator.push: Empuja una nueva ruta a la pila de navegación.
  • Navigator.pop: Saca la ruta superior de la pila de navegación.
  • Navigator.pushReplacement: Reemplaza la ruta actual con una nueva ruta.
  • Navigator.pushNamed: Empuja una nueva ruta usando un nombre predefinido.

Ejemplo de Navigator.push y Navigator.pop

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Explicación del Código

  1. MyApp: Es el widget principal que configura la aplicación con MaterialApp y establece FirstScreen como la pantalla inicial.
  2. FirstScreen: Contiene un botón que, al ser presionado, empuja SecondScreen a la pila de navegación usando Navigator.push.
  3. SecondScreen: Contiene un botón que, al ser presionado, saca la ruta superior de la pila de navegación usando Navigator.pop, volviendo a FirstScreen.

Navegación con Rutas

Flutter permite definir rutas nombradas para facilitar la navegación. Esto es especialmente útil en aplicaciones más grandes con muchas pantallas.

Definición de Rutas

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Explicación del Código

  1. initialRoute: Define la ruta inicial de la aplicación.
  2. routes: Mapa de rutas nombradas a sus correspondientes widgets.
  3. Navigator.pushNamed: Navega a una ruta usando su nombre.

Ejemplo Práctico

Vamos a crear una aplicación simple con tres pantallas: Home, About y Contact. Usaremos rutas nombradas para la navegación.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/about': (context) => AboutScreen(),
        '/contact': (context) => ContactScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: Text('Go to About'),
              onPressed: () {
                Navigator.pushNamed(context, '/about');
              },
            ),
            ElevatedButton(
              child: Text('Go to Contact'),
              onPressed: () {
                Navigator.pushNamed(context, '/contact');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class AboutScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('About Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

class ContactScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contact Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Ejercicios Prácticos

Ejercicio 1: Añadir una Nueva Pantalla

  1. Añade una nueva pantalla llamada ProfileScreen.
  2. Define una ruta nombrada para ProfileScreen.
  3. Añade un botón en HomeScreen que navegue a ProfileScreen.

Solución

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/about': (context) => AboutScreen(),
        '/contact': (context) => ContactScreen(),
        '/profile': (context) => ProfileScreen(), // Nueva ruta
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: Text('Go to About'),
              onPressed: () {
                Navigator.pushNamed(context, '/about');
              },
            ),
            ElevatedButton(
              child: Text('Go to Contact'),
              onPressed: () {
                Navigator.pushNamed(context, '/contact');
              },
            ),
            ElevatedButton(
              child: Text('Go to Profile'), // Nuevo botón
              onPressed: () {
                Navigator.pushNamed(context, '/profile');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Conclusión

En esta lección, hemos aprendido los conceptos básicos de la navegación en Flutter utilizando el widget Navigator y rutas nombradas. La navegación es esencial para crear aplicaciones móviles interactivas y bien estructuradas. En el próximo tema, exploraremos cómo pasar datos entre pantallas, lo cual es crucial para aplicaciones más complejas.

¡Sigue practicando y experimentando con la navegación en Flutter para dominar estos conceptos!

◄ Anterior
◄
Siguiente ►
►

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados