diegoRodicio

Está documentación está a túa disposición sin ningún custo económico. Sen embargo, para a súa elaboración dedico moito tempo e recursos, polo que agradecería unha colaboración co que consideres oportuno. Gracias.

View Categories

🧊 Widgets Sen Estado (StatelessWidget)

En Flutter, un StatelessWidget é un tipo de widget que non cambia o seu contido durante o tempo de execución da aplicación.

🔍 Cando usar StatelessWidget #

Un StatelessWidget é ideal para aquelas partes da interface de usuario cuxa aparencia e comportamento non cambian despois de ser construídas por primeira vez.

Usa un StatelessWidget cando:

  • O widget mostra información estática (como un título, un logo).
  • O widget só depende dos datos que recibe dende o seu construtor (parámetros), e non modifica eses datos.
  • Non hai interaccións do usuario que cambien o estado interno do propio widget (ex: non ten un contador que se incrementa ao premer un botón dentro del).

📌 Exemplos típicos:

  • Un título fixo (Text).
  • Unha icona que non cambia (Icon).
  • Unha imaxe que non se actualiza (Image.asset).
  • Un botón que realiza unha acción pero non cambia a interface ao pulsalo
  • Container: Simplemente organiza e aplica estilos a outros widgets.
  • AppBar: A barra superior dunha pantalla.
  • Padding, Row, Column: Widgets de layout.

🔁 Estrutura e ciclo de vida (build) #

A estrutura dun StatelessWidget é moi sinxela. Só contén:

  1. Debe estender a clase StatelessWidget.
  2. Debe ter un construtor const para estar máis optimizado.
  3. Debe sobrescribir o método build(BuildContext context). É o encargado de devolver a interface de usuario (a árbore de widgets) que este StatelessWidget vai representar na pantalla.

📌 O método build() chámase cando o widget se crea e cando é necesario reconstruílo (por exemplo, se o pai cambia).

📂 Esquema básico #

// ------------------------------------------------------------------
// 🔸 Exemplo básico dun StatelessWidget personalizado 🔸
// ------------------------------------------------------------------

// Creamos unha clase chamada MeuWidget que representa un compoñente da UI.
// Esta clase estende de StatelessWidget, o que significa que non garda estado interno.
class MeuWidget extends StatelessWidget {
  // Constructor da clase. Chamamos ao constructor da superclase e permitimos pasar unha clave (key).
  // As claves úsanse para identificar widgets unicamente dentro da árbore de widgets.
  const MeuWidget({super.key});

  // O método build() é obrigatorio e define a interface visual deste widget.
  // Recibe como argumento un BuildContext, que representa a posición actual do widget na árbore.
  @override
  Widget build(BuildContext context) {
    // Devolvemos un widget Text con un texto sinxelo.
    // Como o texto é fixo e non cambia, este widget non necesita estado.
    return const Text('Ola, mundo!');
  }
}

🧪 Exemplo práctico (Text, Icon, Image) #

Imos crear un exemplo práctico dun StatelessWidget que combine texto, unha icona e unha imaxe estática. Este será un widget que mostre información básica do meu perfil de usuario.

🔗 Ver o código en DartPad

⚡ Xeración de Código Automático (Snippets) #

Lembra que en Visual Studio Code dispomos do atallo (snippet) stless, de xeito que ao escribilo o editor automaticamente crea un StatelessWidget.

📚 Máis información #