El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En Flutter, los widgets son los bloques de construcción fundamentales de la interfaz de usuario. Existen dos tipos principales de widgets: Stateless y Stateful. Entender la diferencia entre estos dos tipos es crucial para desarrollar aplicaciones eficientes y efectivas.

¿Qué es un Widget Stateless?

Un widget Stateless es un widget que no puede cambiar su estado una vez que ha sido construido. Esto significa que no puede actualizarse a sí mismo en respuesta a eventos o cambios en los datos.

Características de los Widgets Stateless:

Inmutables: Una vez creados, no pueden cambiar.
Rendimiento: Generalmente más eficientes en términos de rendimiento porque no necesitan gestionar el estado.
Uso: Ideal para UI que no necesita cambiar dinámicamente.

Ejemplo de un Widget Stateless:

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateless Widget Example'),
      ),
      body: Center(
        child: Text('Hello, I am a Stateless Widget!'),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyStatelessWidget(),
));

Explicación del Código:

MyStatelessWidget: Es una clase que extiende StatelessWidget.
build: Método que describe cómo construir la interfaz de usuario del widget.
Scaffold: Proporciona una estructura básica para la aplicación, incluyendo una barra de aplicaciones y un cuerpo.
Text: Muestra un texto en el centro de la pantalla.

¿Qué es un Widget Stateful?

Un widget Stateful es un widget que puede cambiar su estado durante su ciclo de vida. Esto significa que puede actualizarse a sí mismo en respuesta a eventos o cambios en los datos.

Características de los Widgets Stateful:

Mutables: Pueden cambiar su estado.
Rendimiento: Pueden ser menos eficientes que los widgets Stateless debido a la gestión del estado.
Uso: Ideal para UI que necesita cambiar dinámicamente.

Ejemplo de un Widget Stateful:

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyStatefulWidget(),
));

Explicación del Código:

MyStatefulWidget: Es una clase que extiende StatefulWidget.
_MyStatefulWidgetState: Es una clase privada que extiende State<MyStatefulWidget>. Aquí es donde se define el estado del widget.
_counter: Una variable de estado que se incrementa cada vez que se presiona el botón.
_incrementCounter: Un método que llama a setState para actualizar el estado del widget.
setState: Notifica al framework que el estado ha cambiado y que el widget necesita ser reconstruido.
FloatingActionButton: Un botón flotante que, al ser presionado, llama al método _incrementCounter.

Comparación entre Widgets Stateless y Stateful

Característica	Stateless Widget	Stateful Widget
Mutabilidad	Inmutable	Mutable
Gestión del Estado	No	Sí
Rendimiento	Generalmente más eficiente	Puede ser menos eficiente
Uso	UI estática	UI dinámica

Ejercicio Práctico

Ejercicio 1: Crear un Widget Stateless

Crea un widget Stateless que muestre un texto "Hola, Mundo!" en el centro de la pantalla.

Ejercicio 2: Crear un Widget Stateful

Crea un widget Stateful que tenga un contador que se incremente cada vez que se presione un botón.

Soluciones

Solución Ejercicio 1:

import 'package:flutter/material.dart';

class HelloWorldStateless extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World Stateless'),
      ),
      body: Center(
        child: Text('Hola, Mundo!'),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: HelloWorldStateless(),
));

Solución Ejercicio 2:

import 'package:flutter/material.dart';

class CounterStateful extends StatefulWidget {
  @override
  _CounterStatefulState createState() => _CounterStatefulState();
}

class _CounterStatefulState extends State<CounterStateful> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Stateful'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: CounterStateful(),
));

Conclusión

En esta lección, hemos aprendido la diferencia entre los widgets Stateless y Stateful en Flutter. Los widgets Stateless son inmutables y no pueden cambiar su estado, mientras que los widgets Stateful pueden cambiar su estado y actualizarse en respuesta a eventos. Saber cuándo usar cada tipo de widget es crucial para construir aplicaciones Flutter eficientes y efectivas. En la próxima lección, exploraremos los widgets básicos que se utilizan comúnmente en Flutter.

Widgets Stateless vs Stateful

¿Qué es un Widget Stateless?

Características de los Widgets Stateless:

Ejemplo de un Widget Stateless:

Explicación del Código:

¿Qué es un Widget Stateful?

Características de los Widgets Stateful:

Ejemplo de un Widget Stateful:

Explicación del Código:

Comparación entre Widgets Stateless y Stateful

Ejercicio Práctico

Ejercicio 1: Crear un Widget Stateless

Ejercicio 2: Crear un Widget Stateful

Soluciones

Solución Ejercicio 1:

Solución Ejercicio 2:

Conclusión

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