Junior
Qual é a diferença entre widgets Stateful e Stateless?
sobes.tech IA
Resposta da IA
-
StatelessWidget:
- Não possui estado interno que possa mudar com o tempo.
- Os parâmetros do widget são definidos na sua criação e permanecem inalterados durante todo o seu ciclo de vida.
- Usado para exibir dados estáticos.
- A reconstrução ocorre apenas quando o widget pai é reconstruído.
- Implementado pelo método
build().
-
StatefulWidget:
- Possui um estado interno (
State) que pode mudar em resposta a eventos (ações do usuário, requisições de rede, etc.). - A reconstrução do widget ocorre quando
setState()é chamado. - Usado para criar elementos interativos e exibir dados dinâmicos.
- Consiste em duas partes: o próprio
StatefulWidgete o objetoStateassociado.
- Possui um estado interno (
| Característica | StatelessWidget | StatefulWidget |
|---|---|---|
| Estado | Não possui | Possui um estado mutável (State) |
| Reconstrução | Quando o widget pai é reconstruído | Quando setState() é chamado |
| Uso | Dados estáticos, elementos não interativos | Elementos interativos, dados dinâmicos |
| Implementação | Apenas o método build() |
createState() e métodos do ciclo de vida em State |
// Exemplo de StatelessWidget
class MyStatelessWidget extends StatelessWidget {
final String text;
MyStatelessWidget({required this.text});
@override
Widget build(BuildContext context) {
return Text(text); // Apenas exibe o texto passado
}
}
// Exemplo de StatefulWidget
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0; // Estado interno
void _incrementCounter() {
setState(() {
// Altera o estado e provoca reconstrução
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Contador:'),
Text('$_counter'),
ElevatedButton(
onPressed: _incrementCounter, // Chamada do método ao pressionar
child: Text('Incrementar'),
),
],
);
}
}