Flutter Mobile Development · Lección

Widgets Stateless frente a Stateful

Comprenda las diferencias fundamentales entre StatelessWidget y StatefulWidget, y aprenda cuándo y cómo utilizar cada uno para crear interfaces de usuario dinámicas.

Widgets Stateless frente a Stateful es una lección gratuita de Flutter Mobile Development en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Flutter Mobile Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Flutter Mobile Development incluye 4 lecciones en total.

Widgets: The Building Blocks

Las interfaces de usuario de Flutter se construyen completamente a partir de widgets. ¡Piense en ellos como piezas de LEGO! Todo lo que ve en la pantalla (texto, botones, incluso contenedores de diseño) es un widget.

Los widgets describen cómo debería verse la interfaz de usuario de su aplicación según su configuración y estado actuales. Hay dos tipos principales de widgets con los que se encontrará:

StatelessWidget
StatefulWidget

StatelessWidget: Static UI

Un StatelessWidget es un widget que no cambia su apariencia ni su comportamiento con el paso del tiempo. Una vez que se construye, permanece igual.

No tiene ningún "estado" interno que gestionar.
Sus propiedades son inmutables (no pueden cambiarse después de su creación).
Es perfecto para mostrar contenido estático como texto, iconos o imágenes que no necesitan reaccionar a la interacción del usuario o a cambios en los datos.

Simple StatelessWidget

Aquí tienes un StatelessWidget básico que muestra un mensaje de bienvenida. Observa cómo su contenido es fijo.

Ejecuta este código para ver un mensaje estático de "¡Hola, CoddyKit!".

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stateless Demo'),
        ),
        body: const Center(
          child: Text(
            'Hello, CoddyKit!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

When to Go Stateless

Utiliza un StatelessWidget cuando:

La apariencia del widget dependa únicamente de sus propios parámetros de configuración (pasados en su constructor).
No necesite responder a interacciones del usuario (como toques) o cambios en los datos internos.
Ejemplos: Text, Icon, Image, AppBar, Padding, Row, Column.

Estos widgets son eficientes porque Flutter no necesita reconstruirlos si su padre cambia, a menos que sus propiedades cambien explícitamente.

StatefulWidget: Dynamic UI

Un StatefulWidget es un widget que puede cambiar su apariencia y comportamiento con el tiempo, reaccionando a la entrada del usuario o a cambios en los datos.

Tiene un "estado" interno que puede ser modificado.
Cuando su estado cambia, el widget se reconstruye para reflejar el nuevo estado.
Es perfecto para elementos interactivos como casillas de verificación, controles deslizantes o listas dinámicas.

Updating UI with setState()

Para hacer que un StatefulWidget sea dinámico, modificas su estado interno. Cuando el estado cambia, debes llamar al método setState().

Llamar a setState() le indica a Flutter que el estado interno de este widget ha cambiado y que necesita reconstruir la interfaz de usuario para reflejar el nuevo estado.

¡Sin setState(), tu estado podría cambiar, pero la interfaz de usuario no se actualizará!

Interactive StatefulWidget

Vamos a crear una aplicación de contador sencilla utilizando un StatefulWidget. Toca el botón para incrementar el número.

Observa cómo se utiliza setState() para actualizar la variable _counter y reconstruir la interfaz de usuario.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stateful Demo'),
        ),
        body: const Center(
          child: CounterWidget(),
        ),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0; // This is the mutable state

  void _incrementCounter() {
    setState(() {
      _counter++; // Update state
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Count: $_counter',
          style: const TextStyle(fontSize: 32),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

StatefulWidget's Journey

Los StatefulWidgets pasan por un ciclo de vida. Los momentos clave incluyen:

createState(): Crea el objeto de estado mutable.
initState(): Se llama una vez cuando el widget se inserta en el árbol de widgets. Es ideal para la configuración inicial.
build(): Se llama cada vez que el widget necesita mostrar su interfaz de usuario, normalmente después de setState().
dispose(): Se llama cuando el widget se elimina del árbol. Es ideal para liberar recursos.

Comprender esto ayuda a gestionar interacciones complejas.

Choosing the Right Widget

Aquí tienes una comparación rápida para ayudarte a decidir:

StatelessWidget:
- Propiedades inmutables.
- No cambia después de su creación.
- Sin estado interno.
- Eficiente para contenido estático.
StatefulWidget:
- Estado mutable (gestionado por un objeto State).
- Puede cambiar dinámicamente.
- Responde a la interacción del usuario o a datos.
- Utiliza setState() para activar reconstrucciones.

La mayoría de los widgets comienzan siendo stateless; solo conviértelos en stateful si realmente necesitan cambiar dinámicamente.

Widget Type Challenge

Estás creando una aplicación en Flutter. ¿Qué tipo de widget utilizarías principalmente para un icono simple que, al ser presionado, cambie su color?

Recap: Dynamic vs. Static

¡Buen trabajo! Has aprendido la diferencia fundamental entre StatelessWidget y StatefulWidget.

Los StatelessWidgets son para elementos de interfaz de usuario estáticos que no cambian después de ser construidos.
Los StatefulWidgets son para elementos de interfaz de usuario dinámicos que necesitan reaccionar a interacciones o cambios de datos, utilizando setState() para actualizar su apariencia.

Elegir el tipo de widget adecuado es crucial para crear aplicaciones de Flutter eficientes y mantenibles. ¡En la próxima lección, profundizaremos en los widgets de diseño básicos!

Preguntas frecuentes

¿La lección «Widgets Stateless frente a Stateful» es gratis?

Sí — el texto completo de «Widgets Stateless frente a Stateful» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Flutter Mobile Development, actualiza a CoddyKit PRO. El curso de Flutter Mobile Development incluye 4 lecciones en total.

¿Qué aprenderé en «Widgets Stateless frente a Stateful»?

Comprenda las diferencias fundamentales entre StatelessWidget y StatefulWidget, y aprenda cuándo y cómo utilizar cada uno para crear interfaces de usuario dinámicas. Practicas Flutter Mobile Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Flutter Mobile Development?

No se requiere experiencia previa. Flutter Mobile Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Widgets Stateless frente a Stateful»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Flutter Mobile Development?

Sí. Cada lección de Flutter Mobile Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Widgets Stateless frente a Stateful
Widgets básicos de diseño
Elementos interactivos de la interfaz
Creación de listas desplazables con ListView

← Volver a Flutter Mobile Development