Organizar tus pantallas en carpetas separadas y conectarlas con main.dart es uno de los pasos más importantes al construir una app en Flutter. Aquí aprenderás cómo crear tu carpeta screens, mover tu home a un archivo independiente y agregar un TabBar funcional con su controlador.

¿Cómo organizar la carpeta screens en un proyecto Flutter?

La pantalla principal no debería vivir dentro de main.dart. Lo correcto es separarla en su propio archivo dentro de una carpeta dedicada.

Dentro de lib, crea una carpeta llamada screens y dentro un archivo home_screen.dart. Ese archivo será el contenedor de tu primera pantalla [00:20].

Pasos para mover tu home fuera del main:

1. Importa material.dart en el nuevo archivo.
2. Crea una clase HomeScreen usando upper camel case, ya que es una clase y representa una pantalla.
3. Mantenla como StatelessWidget, porque por ahora es estática.
4. Mueve el contenedor de cards de recetas que tenías en main hacia el body de esta nueva pantalla.

¿Por qué usar StatelessWidget para HomeScreen? Porque la pantalla aún no cambia con la interacción del usuario. Si más adelante necesita actualizarse dinámicamente, la conviertes en StatefulWidget.

¿Cómo envolver tu pantalla en un Scaffold?

El Scaffold es la hoja base de cualquier pantalla en Flutter. Te da estructura para AppBar, body y barras inferiores.

Puedes envolver tu widget actual rápidamente con Alt + Enter y elegir Wrap Widget, escribiendo Scaffold. Reemplaza la propiedad child por body y tu pantalla quedará lista para recibir más componentes [01:30].

¿Cómo crear un TabBar con dos pestañas en Flutter?

Un TabBar te permite navegar entre pantallas con pestañas, ideal para apps con secciones como home, favoritos o perfil.

En el AppBar del Scaffold, agrega la propiedad bottom y asígnale un TabBar. Dentro de ese TabBar, la propiedad tabs recibe una lista entre corchetes, porque más adelante tendrás varias pestañas [02:30].

Cada Tab admite varias propiedades:

• icon: usa la widget Icon con Icons.home para mostrar una casa, aprovechando la librería de Font Google integrada en Flutter.
• text: pasa un string con el nombre visible, por ejemplo "Home".
• Combinación de ambos para mejorar la legibilidad.

¿Qué es Icons en Flutter? Es una clase que da acceso a los íconos de Material Design de Google. Escribes Icons. y tu editor te muestra todas las opciones disponibles.

¿Cómo conectar el TabBar con el body usando TabBarView?

El body ya no recibe una sola pantalla, sino una lista de pantallas que cambian según la pestaña activa.

Reemplaza el contenido del body por la widget TabBarView y pásale, dentro de corchetes, las pantallas que mostrarás. Por ahora solo va HomeScreen(), pero la estructura ya está lista para crecer [03:30].

Si olvidas indentar o cerrar el Scaffold superior, verás un error. Revisa que cada paréntesis y corchete cierre correctamente y termina con punto y coma.

¿Por qué necesito DefaultTabController para que funcione el TabBar?

Al ejecutar la app, Flutter mostrará un error porque el TabBar necesita un controlador que sincronice las pestañas con las vistas.

Envuelve todo el Scaffold en un DefaultTabController. Esta widget administra qué pestaña está activa y coordina el TabBar con el TabBarView [04:30].

Propiedades clave del DefaultTabController:

• length: define el número máximo de pestañas. Si vas a tener cuatro, colocas length: 4.
• child: recibe el Scaffold completo.

¿Qué pasa si el length no coincide con el número de tabs? La app lanza un error en tiempo de ejecución. Siempre asegúrate que length sea igual al número de elementos en tu lista de tabs y de vistas en TabBarView.

Si el emulador entra en modo debug tras guardar, baja hasta la última línea del archivo y refresca para reiniciar la aplicación completa.

¿Cómo personalizar los colores del TabBar?

El diseño visual del TabBar se controla con tres propiedades principales que afectan cómo se ve la pestaña activa y las inactivas.

• indicatorColor: el color de la línea que marca la pestaña seleccionada.
• labelColor: el color del texto y del ícono de la pestaña activa, en este caso blanco.
• unselectedLabelColor: el color de las pestañas no seleccionadas, también blanco para mantener la coherencia del diseño.

Con estas tres propiedades ajustadas, tu TabBar se integra al estilo visual de la app sin necesidad de estilos externos [05:40].

Ejemplo de estructura final simplificada:

dart DefaultTabController( length: 4, child: Scaffold( appBar: AppBar( bottom: TabBar( indicatorColor: Colors.white, labelColor: Colors.white, unselectedLabelColor: Colors.white, tabs: [ Tab(icon: Icon(Icons.home), text: "Home"), ], ), ), body: TabBarView( children: [ HomeScreen(), ], ), ), );

Con esta base puedes seguir agregando pestañas y nuevas pantallas dentro de screens, manteniendo tu código ordenado y escalable. ¿Qué pestañas vas a agregar tú primero a tu app de recetas? Cuéntame en los comentarios.