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.
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
x2 y mencionar los atajos para mac
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)
Si no les funciona ALT + ENTER , pueden intenta con CTRL + .
¡Muchas gracias!, fue de ayuda para el paso de Scaffold
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
Los archivos de la clase si son código de la clase.
Esta en la carpeta lib lo que estamos haciendo.
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
Muchas gracias!
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.
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:
androidyios: 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.).
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:
💡 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. 🚀
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!! ♥️
Que mal explica :c
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.
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.
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.
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 ..
Para envolver el Scaffold en un widget, el atajo que uso la maestra es el siguiente:
para Mac "Command + ."
para Window "Control + ."
en el minuto 1:18, no entiendo que fue lo que hizo la profesora, alguien que por favor me oriente?
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
class name extends StatelessWidget {constname({super.key});
@override
Widget build(BuildContext context){returnContainer();}}```si es confuso pero lo que deben hacer es lo siguiente: 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 {constHomeScreens({super.key}); @override Widget build(BuildContext context){returnScaffold( 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(),),),constSizedBox( width:20,),Column( children: \<Widget>\[constText("arroz peto"),constText("Damian Orduz"),Container(height:2, width:80, color: Colors.black)],)],),),),);}}voidmain()=>runApp(constMyApp());class MyApp extends StatelessWidget {constMyApp({super.key}); @override Widget build(BuildContext context){returnconstMaterialApp( debugShowCheckedModeBanner: false, title:'hola mundo', home:RecipesBook());}}class RecipesBook extends StatelessWidget {constRecipesBook({super.key}); @override Widget build(BuildContext context){returnScaffold( appBar:AppBar( backgroundColor: Colors.black, title:constText('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';voidmain()=>runApp(constMyApp());class MyApp extends StatelessWidget {constMyApp({super.key});
@override
Widget build(BuildContext context){returnconstMaterialApp( debugShowCheckedModeBanner: false, title:'hola mundo', home:RecipesBook());}}class RecipesBook extends StatelessWidget {constRecipesBook({super.key});
@override
Widget build(BuildContext context){returnScaffold( appBar:AppBar( backgroundColor: Colors.black, title:constText('Recipes App', style:TextStyle(color: Colors.white),),), body:HomeScreens());}}```home\_screens.dart:
```js
import 'package:flutter/material.dart';class HomeScreens extends StatelessWidget {constHomeScreens({super.key});
@override
Widget build(BuildContext context){returnScaffold( 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(),),),constSizedBox( width:20,),Column( children:<Widget>[constText("arroz peto"),constText("Damian Orduz"),Container(height:2, width:80, color: Colors.black)],)],),),),);}}```en mi caso en vez de container veran un SizedBox pero solo es porque
flutter lo recomienda segun lo que entiendo es por que es mas liviano que
container ya que solo declaramos 2 propiedades, el alto y el ancho de la caja
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:
Excelente, tuve el mismo problema y ni pude resolverlo! gracias!!
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.
No sé si a alguien más le pasó, y tampoco sé por qué a la profe no le salió el siguiente error:
Controller's length property (4) does not match the number of children (1) present in TabBarView's children property.
Supongo que es parte de las actualizaciones de Flutter pero sólo cambié el length del DefaultTabController a 1 ya que es la cantidad de tabs que tenemos hasta esta clase.
la profesora no lleva un orden por lo que toca retroceder muchas veces en el video y verificar el código de este con el que estoy siguiendo localmente. además los vídeos se nota el corte para seguramente ella verificar el error
Recién comienzo esta semana con el curso y sí quiero mencionar varias cosas que se pueden mejorar:
A Nivel de presentación del mismo:
Siento que debería explicar primero los conceptos básicos de Flutter y su filosofía. Esto antes de tocar cualquier tema de instalación y/o de código.
Va demasiado rápido aun para los que llevamos años como desarrolladores, y siento que falta algo más de pedagogía. Si es para alguien como yo con años de código encima con otras tecnologías, no me imagino cómo es para los que apenas están comenzando en este ámbito.
Hace mucho uso del completador de snippets, y si a nivel laboral se usa mucho, pero se está apenas aprendiendo.
A nivel de la presentación audiovisual:
El código está con un zoom algo grande y justo las ayudas descriptivas ya sea de las extensiones o de las IA de ayuda no dejan ver nada lo previo que se está escribiendo.
La profe está más centrada en picar el código que en explicar mejor lo que se está haciendo y pues se trata de aprender de verdad, no de hacer por hacer.
Todo esto lo digo con el ánimo de que se mejore ya que se paga esta plataforma por una cierta calidad que la verdad a veces no está muy presente que digamos.
