¿Cómo estructurar pantallas en Flutter con TabBar?

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

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

#### **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.). * ```js 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`. * ```js 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. * ```js 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). * ```js 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. * ```js 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](https://keepcoding.io/blog/que-es-arbol-de-widgets-en-flutter/#:~:text=Un%20%C3%A1rbol%20de%20widgets%20en%20Flutter%20es%20una%20representaci%C3%B3n%20visual,y%20puede%20contener%20otros%20widgets.) 💡 **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. 🚀


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.

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