¿Qué es un Widget?

En Flutter, todo es un widget. Los widgets son los bloques de construcción fundamentales de una aplicación Flutter. Cada elemento de la interfaz de usuario que ves en una aplicación Flutter es un widget, desde un simple botón hasta un complejo diseño de pantalla.

Tipos de Widgets

Widgets de Estructura: Definen la estructura y el diseño de la aplicación, como Scaffold, AppBar, Column, y Row.
Widgets de Control: Interactúan con el usuario, como Button, TextField, y Checkbox.
Widgets de Estilo: Aplican estilos y temas, como Padding, Center, y Container.

¿Cómo Funcionan los Widgets?

Los widgets en Flutter son inmutables, lo que significa que no pueden cambiar su estado una vez creados. En lugar de modificar un widget existente, Flutter crea un nuevo widget cada vez que se necesita un cambio. Esto se logra mediante la reconstrucción de la interfaz de usuario.

Ejemplo Básico de un Widget

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mi Primera App Flutter'),
        ),
        body: Center(
          child: Text('¡Hola, Mundo!'),
        ),
      ),
    );
  }
}

Explicación del Código

main: La función principal que ejecuta la aplicación.
MyApp: Un widget que extiende StatelessWidget. Este es el widget raíz de la aplicación.
MaterialApp: Un widget que envuelve la aplicación y proporciona temas y navegación.
Scaffold: Proporciona una estructura básica para la aplicación, incluyendo una barra de aplicaciones y un cuerpo.
AppBar: Un widget que representa la barra de aplicaciones.
Center: Un widget que centra su hijo.
Text: Un widget que muestra texto.

Ciclo de Vida de un Widget

El ciclo de vida de un widget en Flutter es crucial para entender cómo y cuándo se reconstruyen los widgets. Aquí hay una descripción general:

Creación: El widget se crea y se inserta en el árbol de widgets.
Construcción: El método build se llama para construir el widget.
Actualización: Si el estado del widget cambia, se reconstruye.
Destrucción: El widget se elimina del árbol de widgets.

Ejercicio Práctico

Ejercicio 1: Crear un Widget Personalizado

Crea un widget personalizado que muestre un texto centrado en la pantalla.

Solución

import 'package:flutter/material.dart';

void main() {
  runApp(MyCustomApp());
}

class MyCustomApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Widget Personalizado'),
        ),
        body: Center(
          child: CustomTextWidget(),
        ),
      ),
    );
  }
}

class CustomTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Este es un widget personalizado',
      style: TextStyle(fontSize: 24),
    );
  }
}

Explicación del Código

MyCustomApp: Similar a MyApp, pero utiliza un widget personalizado.
CustomTextWidget: Un widget personalizado que muestra un texto.

Resumen

En esta lección, hemos aprendido:

Qué es un widget y los diferentes tipos de widgets en Flutter.
Cómo funcionan los widgets y su ciclo de vida.
Cómo crear y utilizar widgets básicos en Flutter.
Cómo crear un widget personalizado.

En la próxima lección, profundizaremos en la diferencia entre StatelessWidget y StatefulWidget, y cuándo usar cada uno.

Introducción a los Widgets

¿Qué es un Widget?

Tipos de Widgets

¿Cómo Funcionan los Widgets?

Ejemplo Básico de un Widget

Explicación del Código

Ciclo de Vida de un Widget

Ejercicio Práctico

Ejercicio 1: Crear un Widget Personalizado

Solución

Explicación del Código

Resumen

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio