Route en Flutter: guía para desarrolladores móviles

Si formas parte del mundo del desarrollo de aplicaciones móviles, es probable que ya conozcas algo acerca de herramientas como Flutter y sus diversos componentes. Uno de ellos es el concepto de route en Flutter o ruta, que consiste en una abstracción para una entrada que controla un navegador.

Si lo que quieres es aprender más acerca de las rutas en Flutter, incluyendo sus propiedades y características relevantes, quédate en este artículo y apréndelo todo sobre este recurso.

¿Qué es Route en Flutter?

Una ruta o route en Flutter se entiende como una abstracción que representa una entrada en el navegador del sistema. El Navigator de Flutter, que actúa como una pila de rutas, maneja la navegación entre diferentes pantallas (o páginas) de la aplicación. Cada vez que se empuja una nueva ruta a la pila del Navigator, se muestra una nueva pantalla, y cuando se saca una ruta de la pila, se regresa a la pantalla anterior.

En términos técnicos, el route en Flutter es una clase que define una interfaz abstracta entre el Navigator y las distintas páginas de la aplicación. Esta clase proporciona las herramientas necesarias para gestionar cómo se presentan y se comportan las pantallas dentro de la aplicación, incluyendo la posibilidad de definir transiciones animadas entre rutas.

Características de route en Flutter

Existen algunas características que los Flutter developers deben conocer para aprender a manejar esta herramienta. Veamos:

• Presentaciones visuales y superposiciones: Una de las características principales de la opción de route en Flutter es que una gran parte de las rutas del sistema incluyen presentaciones visuales que se ubican en la superposición de los navegadores a través del uso de uno o varios objetos OverlayEntry.
• Creación de rutas: En lo que respecta a la creación de rutas en el sistema de Flutter, cabe destacar que una ruta puede ser escrita en forma de clase en Dart, implementando conceptos orientados a objetos. Es importante tener en cuenta también que cada ruta puede escribirse como una clase separada con su propia interfaz de usuario y contenido.

Tipos de rutas en Flutter

MaterialPageRoute

Este tipo de ruta utiliza una transición de deslizamiento estándar para plataformas Android.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

CupertinoPageRoute

Utiliza una transición de deslizamiento estilo iOS.

Navigator.push(
  context,
  CupertinoPageRoute(builder: (context) => SecondPage()),
);

PageRouteBuilder

Permite crear transiciones personalizadas.

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(opacity: animation, child: child);
    },
  ),
);

Métodos para manejar rutas

Push

Empuja una nueva ruta a la pila de navegación.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

Pop

Saca la ruta superior de la pila.

Navigator.pop(context);

PushReplacement

Reemplaza la ruta superior con una nueva.

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

PushNamed

Empuja una ruta nombrada a la pila.

Navigator.pushNamed(context, '/second');

Uso de rutas nombradas

Definición de rutas nombradas

En el archivo principal de tu aplicación, define las rutas:

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => FirstPage(),
      '/second': (context) => SecondPage(),
    },
  ));
}

Navegación usando rutas nombradas

Navigator.pushNamed(context, '/second');

• Navegación anidada: Flutter permite manejar la navegación dentro de subárboles de widgets utilizando múltiples Navigator widgets. Esto es útil en aplicaciones con navegación compleja.
• Transiciones y animaciones personalizadas: Puedes personalizar las transiciones entre rutas usando el PageRouteBuilder y el transitionsBuilder.

Gestión del estado en la navegación

Mantén y pasa el estado entre rutas usando argumentos o paquetes como provider para gestionar el estado global.

Ejemplo de pasar datos entre rutas

Pasar datos al empujar una ruta:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(data: 'Hello'),
  ),
);

Recibir datos en la segunda página:

class SecondPage extends StatelessWidget {
  final String data;

  SecondPage({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(child: Text(data)),
    );
  }
}

En este artículo has podido conocerlo todo sobre la opción de route en Flutter, así como sus características más relevantes. Ahora que has alcanzado este punto, atrévete a seguir aprendiendo y forma parte de nuestro Desarrollo de Apps Móviles Full Stack Bootcamp, donde podrás continuar tu formación tanto a nivel teórico como práctico para convertirte en un verdadero experto del sector IT en muy poco tiempo. ¡Apúntate ahora y transforma tu vida al mejorar tus oportunidades y habilidades!