Contido:
Os StatefulWidget son aqueles widgets que poden cambiar co tempo, é dicir, teñen estado mutable. Son ideais para situacións nas que a interface debe actualizarse tras unha acción do usuario ou un evento.
❓ Cando usar StatefulWidget #
Usamos StatefulWidget cando:
- A interface precisa cambiar despois de certa acción (por exemplo, ao premer un botón).
- Hai datos que cambian dinamicamente (como o contador dun cronómetro ou o contido dun formulario).
- A pantalla precisa gardar estado entre actualizacións (como o scroll nunha lista).
📌 Exemplos típicos:
- Contadores.
- Formularios que se validan mentres se escriben.
- Elementos interactivos como
Checkbox,Slider,Switch, etc.- Un campo de texto (
TextField) onde o usuario introduce información.- Un reprodutor de vídeo que mostra o tempo transcorrido.
🧬 Estrutura e ciclo de vida (initState, build, dispose) #
A diferenza dos StatelessWidget que son unha única clase, un StatefulWidget componse de dúas clases:
- A clase principal, que estende de
StatefulWidget. É inmutable. - A clase
State:. Aquí é onde se gardan os datos que cambian e se constrúe a interface.
🔄 Métodos principais do ciclo de vida #
| Método | Cando se chama | Para que serve |
|---|---|---|
initState() | Só unha vez, ao crear o widget | Inicializar variables, abrir recursos, comezar animacións |
build() | Sempre que se crea ou se chama setState() | Construír a interface visual do widget |
dispose() | Ao destruír o widget | Liberar recursos, pechar conexións ou controladores |
Ciclo de vida importante: #
initState() #
- Chamado unha vez ao comezar.
- Non é obrigatorio
- Úsase para inicializacións, como cargar datos ou realizar configuracións que só necesitan facerse unha vez.
- Chámase unha única vez cando o obxecto
Statese crea e se insire na árbore de widgets. - Sempre debes chamar a
super.initState()ao principio.
build(BuildContext context) #
- Este método é obrigatorio e chámase cada vez que o widget necesita ser debuxado ou reconstruído (por exemplo, tras un
setState()). - Aquí definimos que widgets se deben mostrar.
dispose() #
- Chamado cando o widget se elimina da árbore.
- Non é obrigatorio
- Úsase para liberar recursos, como cancelación de listeners ou controladores.
- Sempre debes chamar a
super.dispose()ao final
✍️ O método setState() #
Cando o estado interno do teu widget cambia e queres que eses cambios se reflictan na pantalla, debes chamar a setState().
Chamando a
setState(), dígolle a Flutter que algo cambiou e debe reconstruír a interface.
setState(() {
// Actualizamos o valor dun atributo do estado
_contador++;
});
🧪 Exemplo práctico (Contador simple) #
🧪 Outro contador #
⚡ Xeración de Código Automático (Snippets) #
Lembra que en Visual Studio Code dispomos do atallo (snippet) stful, de xeito que ao escribilo o editor automaticamente crea un StatefulWidget completo coa súa clase State asociada.
