diegoRodicio

View Categories

⚖️ Diferenza entre `StatelessWidget` e `StatefulWidget`

Tempo de lectura estimado: 1 minutos

A distinción entre StatelessWidget e StatefulWidget é fundamental en Flutter e determina como se comportan os teus widgets cando os datos da interface cambian.

🧱 StatelessWidget (Widgets sen estado)

Úsase cando o contido do widget non necesita cambiar mentres a app está en execución.

  • Non teñen estado interno que poida cambiar durante a vida da aplicación.
  • Son máis sinxelos e eficientes.
  • Exemplos: Text (o texto non cambia a menos que lle pases un texto novo), Icon, Image, Container.

Cando usalos: Cando a información que mostra o widget é fixa ou só depende dos parámetros que se lle pasaron.

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

  @override
  Widget build(BuildContext context) {
    return const Text('Ola, mundo!');
  }
}

🔁 StatefulWidget (Widgets con estado)

Úsase cando o widget debe actualizar a súa interface como resultado dunha acción (premer un botón, introducir texto, etc.).

  • Exemplos: Checkbox (o seu estado «marcado/desmarcado» cambia), TextField (o texto que o usuario escribe cambia), un contador que se incrementa.
  • Estrutura: Un StatefulWidget divídese en dúas clases: o propio StatefulWidget e a clase State asociada. A clase State é onde se garda o estado mutable e onde se define o método build() que crea a UI.

Cando usalos: Cando o widget necesita cambiar a súa aparencia ou os seus datos sen ser totalmente substituído.

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

  @override
  State<Contador> createState() => _ContadorState();
}

class _ContadorState extends State<Contador> {
  int _valor = 0;

  void _incrementar() {
    setState(() {
      _valor++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Valor actual: $_valor'),
        ElevatedButton(
          onPressed: _incrementar,
          child: const Text('Incrementar'),
        ),
      ],
    );
  }
}

📚 Máis información oficial e APIs