¿Qué son los Widgets en Flutter y Cómo Funcionan?

En Flutter, el Scaffold es un widget que proporciona una **estructura básica** para crear una interfaz de usuario en una aplicación móvil. Es uno de los widgets más importantes y más utilizados en Flutter, ya que te ayuda a implementar un diseño **Material Design** de manera rápida y sencilla. **¿Qué hace el Scaffold?** El Scaffold actúa como un **contenedor principal** para tu aplicación. Proporciona una serie de funcionalidades comunes en las aplicaciones móviles, tales como: • **AppBar**: Una barra superior que suele contener el título de la página, íconos, menús, etc. • **Body**: La sección principal de la pantalla donde se colocan los widgets. • **Drawer**: Un menú lateral que se desliza desde el borde izquierdo. • **BottomNavigationBar**: Una barra de navegación en la parte inferior de la pantalla. • **FloatingActionButton (FAB)**: Un botón flotante que suele usarse para acciones importantes. • **SnackBar**: Mensajes emergentes que se muestran en la parte inferior de la pantalla.

Hola en caso de que tenga alguien este error (en Windows): ``` cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See <https://developer.android.com/studio/command-line> for more details. ``` Vayan a android studio y Settings -> Android SDK, denle check a `Android SDK Command-line Tools (latest)` Y, en caso de que tengan este mensaje: ``` Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at <https://visualstudio.microsoft.com/downloads/.> Please install the "Desktop development with C++" workload, including all of its default components ``` Simplemente pueden obviar las aplicaciones de escritorio con este comando: ``` flutter config --no-enable-windows-desktop ```

Para que Visual Studio Code te ayude con la indentacion y la prolijidad del codigo, es recomendable: 0\) Hacer caso a todas las clases anteriores 😅 1\) instalar prettier 2\) separar con "," a los widget de flutter  De esta forma veras comentado el codigo por el mismo editor

Gran Clase! Me gusta como explicas, sin entrar a tecnicismos, el concepto de algo, ya que muchas personas pueden enredar mas su aprendizaje si de entrada el vocabulario es muy técnico. Cuando inicie a desarrollar en Flutter, viniendo de Xamarin, mi primer conclusión fue: que cosa tan enredada, quien puede entender un código con tanta cosa junta y como tal mal estructurada. Una conclusión muy ingenua, pero era mi primer contacto con Flutter. Me encanta Flutter, y será ya casi imposible retornar a Xamarin, hoy MAUI. A los Widget, los veo como controles de usuario, creados para cumplir tareas especificas. Esto ayuda a poderlos reutilizar. Esto ayuda bastante a tener un código, legible, mantenible, escalable, pero sobretodo extensible. De entrada diría, que la clave esta en definir un orden de codificación lo mas estándar, esto ayudara mucho en la construcción de un proyecto. Dejare por acá el mío, se que muchos dirán sube, baja, quita, pone. Pero es que el mas me ha a ayudado a organizar mi código. ![]() ```js import 'package:flutter/material.dart'; void main() { runApp(const App()); } class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( title: 'Hola Mundo', home: RecipeBook(), debugShowCheckedModeBanner: false, ); } } // StatelessWidget: // Clase con un estado estatico, no se puede modificar. class RecipeBook extends StatelessWidget { const RecipeBook({super.key}); // Constructor de la clase // Se ejecuta cuando se crea una instancia de la clase @override Widget build(BuildContext context) { // Retorna un Scaffold: // Estructura visual de la aplicacion: hoja en blanco return Scaffold( appBar: AppBar( // Barra superior o barra de navegación backgroundColor: Colors.orange, title: const Text( 'Recibe Book', style: TextStyle( color: Colors.black45, ), ), ) ); } } ```import 'package:flutter/material.dart'; void main() { runApp(const App());} class App extends StatelessWidget { const App({*super*.key}); @override Widget build(BuildContext context) { return const MaterialApp( title: 'Hola Mundo', home: RecipeBook(), debugShowCheckedModeBanner: false, ); }} *// StatelessWidget:// Clase con un estado estatico, no se puede modificar.* class RecipeBook extends StatelessWidget { const RecipeBook({*super*.key}); *// Constructor de la clase* *// Se ejecuta cuando se crea una instancia de la clase* @override Widget build(BuildContext context) { *// Retorna un Scaffold:* *// Estructura visual de la aplicacion: hoja en blanco* return Scaffold( appBar: AppBar( *// Barra superior o barra de navegación* backgroundColor: Colors.orange, title: const Text( 'Recibe Book', style: TextStyle( color: Colors.black45, ), ), ) ); }}

El comando ALT + ENTER, En mac es COMMAND + PUNTO

En la clase se presentó el concepto de widgets en Flutter, comenzando por qué son y cómo funcionan. Se explicó que las widgets son componentes básicos que conforman la interfaz de usuario y pueden contener otras widgets. Se trabajó con un _stateless widget_ llamado `ResightBook`, que representa un libro de recetas, y se mostró cómo construir su estructura utilizando propiedades como `title` y `home`. También se abordaron aspectos de personalización, como modificar colores y estilos, y se dio una breve introducción a cómo organizar el código en Flutter.

Que linda sonrisa, ¡muchas gracias profe!

Las widgets en Flutter son componentes fundamentales que construyen la interfaz de usuario. Cada widget representa un elemento visual, como un botón o un texto, y puede contener otros widgets, formando una jerarquía. Flutter utiliza dos tipos de widgets: Stateless, que no tienen estado y no cambian, y Stateful, que pueden cambiar su apariencia basada en eventos. Cada widget tiene propiedades que definen su comportamiento y apariencia, permitiendo personalizar la aplicación de manera dinámica y eficiente.