Sobes.tech
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 StatefulWidget e o objeto State associado.
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'),
        ),
      ],
    );
  }
}