Estructuración y Navegación de Pantallas en Flutter

Resumen

Aquí aprenderás a estructurar y gestionar pantallas en tu aplicación, integrándolas de manera organizada y funcional en tu proyecto Flutter. Descubre cómo configurar un sistema de navegación con pestañas para mejorar la experiencia del usuario.

¿Cómo estructurar las pantallas de tu aplicación?

Crea una carpeta específica: Dentro de tu proyecto, organiza tus pantallas en una nueva carpeta llamada screens.
Configura una pantalla inicial: Crea un archivo como home_screen.dart para tu pantalla principal.
Usa la convención UpperCamelCase: Al nombrar clases como HomeScreen, asegúrate de respetar esta convención para mantener la legibilidad.

¿Cómo mover componentes del main a la pantalla principal?

Identifica los componentes existentes: Ubica elementos como contenedores en el archivo principal main.dart.
Reubica los widgets al nuevo archivo: Transfiere estos componentes al archivo de la pantalla principal (home_screen.dart), utilizando el widget Scaffold para estructurarlos.
Reemplaza el child por body: En el Scaffold, usa body en lugar de child para mayor claridad y funcionalidad.

¿Cómo implementar una barra de navegación con pestañas?

Agrega un AppBar con TabBar: Incluye una barra de navegación inferior (TabBar) dentro de tu AppBar.
Configura pestañas iniciales:
- Usa widgets de Icon para representar visualmente las pestañas.
- Agrega texto descriptivo con el widget Text.
Utiliza un TabBarView: Define un TabBarView para que las pestañas muestren diferentes pantallas.

¿Cómo solucionar errores al configurar el TabBar?

Envuelve el Scaffold con un controlador: Usa el widget DefaultTabController para manejar las pestañas.
Configura propiedades adicionales:
- Ajusta el indicador de la pestaña activa con un color distintivo.
- Personaliza el texto con colores para estados seleccionados y no seleccionados.
Gestiona errores en el emulador: Si surgen problemas al guardar, refresca el proyecto desde la línea final para aplicar cambios correctamente.

¿Qué más puedes personalizar en tu TabBar?

Añade más pestañas: Amplía tu navegación agregando más pantallas al listado de pestañas.
Optimiza el diseño:
- Define un máximo de pestañas visibles.
- Configura colores consistentes con el tema de tu aplicación.

Arturo Cueva

student•

Buenas tardes, como sugerencia a los videos, veo que la profesora usa atajos que no menciona y tenemos que estar retrocediendo los videos para revisar una y otra vez. Como por ejemplo en el min 1:18 de este video. Deben explicarlo de forma más pausada tomando en cuenta que es un curso desde cero. Muchas gracias

Raul Lopez

student•

x2 y mencionar los atajos para mac

Julia Gabriela Nieva Paredes

student•

Algunos atajos útiles:

stles: para crear la estructura de un StatelessWidget
stful: para crear la estructura de un StatefulWidget.

Estos atajos funcionan si tienes la extensión Awesome Flutter Snippet

También si estás en Windows, usa control + . para obtener la corrección rápida (Quick Fix)

Daniel Cardenas Parra

student•

Si no les funciona ALT + ENTER , pueden intenta con CTRL + .

Yamid Horacio Rodríguez

student•

¡Muchas gracias!, fue de ayuda para el paso de Scaffold

Jose Miguel Lopez

student•

SI le pasas este error "Controller's length property (4) does not match the number of tabs (1) present in TabBar's tabs property.

" es por que falto explicar que no puedes indicar 4 TAB en DefaultTabController si en realidad tienes 1 TAB (Home) este "error" se soluciona cambiando 4 por el 1 en el length, básicamente

Rafael Bautista

student•

Muchas gracias!

Neil Denis Elescano Quispe

student•

Me llama mucho la atención el curso, pero se me hace muy difícil de seguir todo lo que hace y cuando veo los recursos, no es código de la clase. Realmente quiero aprender, tener en cuenta que no sé mucho de programación. Pensé que sería como los otros cursos, no pido que sea muy básico, sino que no enseñe como si estuviera x2

Verónica Montserrat Martínez Lona

student•

Los archivos de la clase si son código de la clase.

Esta en la carpeta lib lo que estamos haciendo.

Carlos Orjuela

student•

En el minuto 1:18

En este caso, lo que se hizo es algo llamado, separar responsabilidade. En este lo que se hizo fue separar el cuerpo de la pantalla (Body), en una clase nueva, a la cual se le llamo HomeScreen. Al crear la nueva clase, se agrego simplemente una hoja de trabajo (Scaffold) y se pego el código que estaba en el main, la clase RecipeBook (propiedad body), en la propiedad 'body' del Scaffold.

Separar el código en Flutter por clases y widgets tiene múltiples beneficios que contribuyen a la calidad, mantenibilidad y escalabilidad del desarrollo de aplicaciones.

Reutilización del código
Legibilidad y organización
Facilidad para pruebas y depuración
Mantenibilidad
Modularidad
Rendimiento

Todo lo anterior permitirá optimizar tanto la experiencia del desarrollador (quien desarrollo y quien es nuevo y se topa con el proyecto) como la del usuario final.

Daniel Cardenas Parra

student•

1. Entendiendo la Estructura de un Proyecto Flutter

lib/main.dart: Es el archivo principal donde comienza tu app. Aquí defines la estructura básica de tu aplicación.
void main() { runApp(MyApp()); }
Carpetas Comunes:
- android y ios: Contienen los archivos específicos para cada plataforma, como configuraciones de permisos y gradle.
- pubspec.yaml: Archivo donde defines:
  - Paquetes: Dependencias externas para tu proyecto.
  - Fuentes y Recursos: Como imágenes y fuentes personalizadas.

2. Widgets Básicos en Flutter

Los widgets son bloques fundamentales de construcción en Flutter. Todo lo que ves en pantalla es un widget.

Scaffold: La base para crear una pantalla con estructura estándar (AppBar, Body, etc.).

Scaffold(
  appBar: AppBar(title: Text('Mi App')),
  body: Center(child: Text('Hola Flutter!')),
)
```Scaffold(

appBar: AppBar(title: Text('Mi App')),
body: Center(child: Text('Hola Flutter!')),
)
Container: Un widget versátil para diseño, con propiedades como color, padding, y margin.

Container(
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.all(8),
  color: Colors.blue,
  child: Text('Soy un Container'),
)
```Container(

padding: EdgeInsets.all(16),
margin: EdgeInsets.all(8),
color: Colors.blue,
child: Text('Soy un Container'),
)
Text: Muestra texto en pantalla con personalización.

Text(
  'Hola Mundo!',
  style: TextStyle(fontSize: 24, color: Colors.black),
)
```Text(

'Hola Mundo!',
style: TextStyle(fontSize: 24, color: Colors.black),
)
Row y Column: Sirven para organizar widgets horizontal (Row) o verticalmente (Column).

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [Text('Fila 1'), Text('Fila 2')],
)
```Column(

mainAxisAlignment: MainAxisAlignment.center,
children: [Text('Fila 1'), Text('Fila 2')],
)
ListView: Para listas desplazables dinámicas o estáticas.

ListView(
  children: [
    ListTile(title: Text('Elemento 1')),
    ListTile(title: Text('Elemento 2')),
  ],
)

```ListView(

children: [
ListTile(title: Text('Elemento 1')),
ListTile(title: Text('Elemento 2')),
],
)

3. ¿Qué es el Árbol de Widgets en Flutter?

Un árbol de widgets es la representación visual de tu interfaz en Flutter. Los widgets están organizados en una jerarquía donde cada widget es un nodo que puede contener otros widgets.

Ejemplo de Árbol de Widgets:
MaterialApp └── Scaffold ├── AppBar └── Body └── Center └── Text
Cada widget en este árbol se encarga de una parte específica de la pantalla.

🔗 Más información sobre el Árbol de Widgets: keepcoding.io

💡 Consejo Final: Explora con ejemplos simples y aprende cómo interactúan los widgets entre sí. Flutter es poderoso porque te permite diseñar interfaces complejas con facilidad. 🚀

Gino Leon

student•

Para envolver el Scaffold en un widget, el atajo que uso la maestra es el siguiente:

para Mac "Command + ."

para Window "Control + ."

Platzi Team

student•

Si no se les ejecuta la app siguiendo los pasos de la profe, es porque definieron la cantidad de tabs en 4 cuando solamente hemos agregado una screen (Home), entonces cambien a cantidad de tabs a 1 y así se les ejecutaría el código.

Lo admito, es complejo pero vale la pena cuando empiezas a entender su funcionamiento. Perseveren!! ♥️

Santiago Arias

student•

Que mal explica :c

Pablo Valenzuela Hernandez

student•

No dudo de las capacidades de la Maestra, pero por favor si mejoran este curso no lo hagan en una pantalla de laptop es frustante como la mayoria del tiempo que esta escribiendo el codigo se ve reflejado el quickfix o el contexto de error que pone VSC, ademas de faltarle vocabulario al momento de expresarse si contamos las veces que dice adicional a esto seria la mitad del curso.

Wilmer Alexander Rodriguez Castro

student•

en el minuto 1:18, no entiendo que fue lo que hizo la profesora, alguien que por favor me oriente?

Ariel Sánchez

student•

Estoy igual, por mas que le bajo la velocidad, no logro identificar, siento que hace todo muy rapido y no explica a detalle, es mi primer acercamiento a Flutter y nomas no le entiendo nada

BolivarCapacitaciones1 HD

student•

class name extends StatelessWidget {
  const name({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
```si es confuso pero lo que deben hacer es lo siguiente:&#x20;

despues de crear home\_screen.dart, y de crear el widge de StatelessWidget nos queda el codigo anterior en la clase HomeScreen, ahora se van a main.dart y van a coger el container que esta despues de body y lo van a seleccionar y lo van a cortar, es exactamente hasta el primer parentesis de abajo hacia arriba ese parentesis pertenece al Scaffold asi que no lo vallan a seleccionar, luego de eso van a pegarlo en la clase HomeScreen despues del return, borran ese container sin borrar el ; y pegan el que traen de main, luego de eso solo van a darle en el bombillito amarillo y van a escoger la primera opcion lo que hace es envolver ese container en un widge como lo entiendo, y van a borrar widge y lo van a remplazar por Scaffold y van a remplazar child por body antes de container, lo unico que queda es llamar a la clase HomeScreens en la clase main para esto solo van a main. dart y donde estaba el container que cortaron escriben HomeScreens() y flutter va a importarlo automaticamente igualmente les dejo ambas clases hasta este punto import 'package:flutter/material.dart';import 'package:recipe\_book/screens/home\_screens.dart';import 'package:flutter/material.dart';
class HomeScreens extends StatelessWidget {  const HomeScreens({super.key});
  @override  Widget build(BuildContext context) {    return Scaffold(      body: SizedBox(        width: MediaQuery.of(context).size.width,        height: 125,        child: Card(          child: Row(            children: \<Widget>\[              SizedBox(                height: 125,                width: 100,                child: ClipRRect(                  borderRadius: BorderRadius.circular(10),                  child: Container(),                ),              ),              const SizedBox(                width: 20,              ),              Column(                children: \<Widget>\[                  const Text("arroz peto"),                  const Text("Damian Orduz"),                  Container(height: 2, width: 80, color: Colors.black)                ],              )            ],          ),        ),      ),    );  }}

void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {  const MyApp({super.key});
  @override  Widget build(BuildContext context) {    return const MaterialApp(        debugShowCheckedModeBanner: false,        title: 'hola mundo',        home: RecipesBook());  }}
class RecipesBook extends StatelessWidget {  const RecipesBook({super.key});
  @override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(          backgroundColor: Colors.black,          title: const Text(            'Recipes App',            style: TextStyle(color: Colors.white),          ),        ),        body: HomeScreens());  }}

para que las revisen, main.dart:

```c#
import 'package:flutter/material.dart';
import 'package:recipe_book/screens/home_screens.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'hola mundo',
        home: RecipesBook());
  }
}

class RecipesBook extends StatelessWidget {
  const RecipesBook({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
          title: const Text(
            'Recipes App',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: HomeScreens());
  }
}


```home\_screens.dart:

```js
import 'package:flutter/material.dart';

class HomeScreens extends StatelessWidget {
  const HomeScreens({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: 125,
        child: Card(
          child: Row(
            children: <Widget>[
              SizedBox(
                height: 125,
                width: 100,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Container(),
                ),
              ),
              const SizedBox(
                width: 20,
              ),
              Column(
                children: <Widget>[
                  const Text("arroz peto"),
                  const Text("Damian Orduz"),
                  Container(height: 2, width: 80, color: Colors.black)
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

```en mi caso en vez de container&#x20;
veran un SizedBox pero solo es porque
flutter lo recomienda segun lo que&#x20;
entiendo es por que es mas liviano que
container ya que solo declaramos&#x20;
2 propiedades, el alto y el ancho de la&#x20;
caja

Stephania Osorio

student•

Hola, en mi caso daba error:

Resulta que si se usa TabBar o TabBarView, se debe envolver en un DefaultTabController para que funcionen correctamente y debe hacerse desde el RecipeBook y no desde el HomeScreen, por lo que se deja el Scaffold normal en HomeScreen y el DefaultTabController se agrega en RecipeBook para que funcione:

DANIEL YANEZ

student•

Excelente, tuve el mismo problema y ni pude resolverlo! gracias!!

LUIS MIGUEL OLARTE BELLO

student•

No entiendo para nada este curso, la profesora va muy rápido y no explica que es cada cosa y para que sirve, por eso dejé de pagar platzi, porque invierten mas en publicidad que en su material y sus cursos.

Diego Andrés Lopez Rodriguez

student•

Jonathan Vera Segura

student•

NO SE SI ES LA TEGNOLOGIA PERO, QUE MAL EXPLICA TRATE DE SEGUIRLA HASTA ACA PERO NO VEO ESA GANAS DE ENSEÑARTE ES COMO SI ESTUVIERA ESCRIBIENDO CODIGO SOLA POR QUE NO EXPLICA? CADA LINEA? 2/10 Puntos no me atrevo haber el resto de videos.

Jonathan Vera Segura

student•

creo que acá más explica cómo escribir código que mostrar en una pizarra usaremos estos elementos para poder tener estas formas .. no explica desde el comienzo eso para alguien que no sabe flutter esto es muy rápido ..

Laura Marcela Hernandez Rodriguez

student•

Firebase (Firestore) y SQLite son opciones populares para manejar bases de datos en aplicaciones Flutter, cada una con sus ventajas.

Firebase (Firestore) es ideal para aplicaciones en tiempo real, ya que permite la sincronización automática entre clientes. Es una opción perfecta si necesitas escalabilidad y no deseas manejar la infraestructura del servidor.

SQLite, por otro lado, es mejor para aplicaciones que no requieren conexión constante a Internet. Es una base de datos local, rápida y adecuada para almacenar datos en dispositivos.

La elección depende de los requisitos específicos de tu aplicación y su arquitectura.

Laura Marcela Hernandez Rodriguez

student•

Para envolver un widget en Flutter utilizando "Wrap with Widget" en Windows, sigue estos pasos:

Abre tu archivo Dart en tu IDE.
Selecciona el widget que deseas envolver.
Haz clic derecho y elige "Refactor" o "Wrap with Widget".
Selecciona el widget que deseas usar para envolver (por ejemplo, Container o Scaffold).
Asegúrate de que el nuevo widget tenga las propiedades necesarias.

Recuerda que al trabajar con Flutter, es crucial tener bien estructurada tu aplicación y sus pantallas, como se mencionó en la clase sobre "Estructuración y Navegación de Pantallas en Flutter".

Constanza Josefa Carrasco Escalona

student•

Cuando se menciona "modo debug", se refiere a la forma en la que el emulador o IDE ejecuta la aplicación, permitiendo detectar errores. Para refrescarla, normalmente debes parar la ejecución y volver a iniciar. Si al dar "siguiente" no funciona, puede deberse a que falte actualizar el código o a que haya un error en el mismo. Asegúrate de guardar todos los cambios en tu archivo antes de probar de nuevo. Seguir estos pasos puede ayudarte a solucionar problemas de visualización.

Diego Armando Tejedor Cortes

student•

En windows, el atajo para mas acciones es: Ctrol + .