Qual é a diferença entre StatelessWidget e StatefulWidget?

Question

Accepted Answer

Flutter tem dois tipos fundamentais de widget: **StatelessWidget** (imutável, sem estado interno que muda) e **StatefulWidget** (pode manter e atualizar estado mutável, reconstruindo quando o estado muda). Escolher o correto é fundamental para construir UIs em Flutter. ## StatelessWidget — sem estado mutável ```dart // a StatelessWidget: just describes UI based on its inputs (immutable, no internal state) class Greeting extends StatelessWidget { final String name; const Greeting(this.name); @override Widget build(BuildContext context) { return Text('Hello, $name'); // UI depends only on inputs, never changes itself } } // → use for UI that doesn't change on its own (static content, displays based on inputs) ``` ## StatefulWidget — tem estado mutável ```dart // a StatefulWidget: holds STATE that can change → rebuilds the UI when it does class Counter extends StatefulWidget { @override State createState() => _CounterState(); } class _CounterState extends State { int count = 0; // mutable STATE @override Widget build(BuildContext context) { return Column(children: [ Text('Count: $count'), ElevatedButton( onPressed: () => setState(() => count++), // setState → rebuild with new state child: Text('Increment'), ), ]); } } ``` ## setState — a chave para StatefulWidget ```text → setState(() { ... }) tells Flutter the state CHANGED → triggers a REBUILD (build() runs again with the new state, updating the UI) → WITHOUT setState, changing a variable won't update the UI → StatefulWidget = widget config (immutable) + a State object (holds mutable state) ``` ## Escolhendo ```text STATELESS → UI based purely on inputs; doesn't change itself (most widgets; simpler) STATEFUL → needs to hold/change internal state over time (counters, forms, toggles, animations, anything interactive that changes) → Prefer Stateless when possible (simpler); use Stateful when you need changing state. ``` ## Por que isso importa Entender a diferença entre StatelessWidget e StatefulWidget é fundamental no desenvolvimento Flutter porque escolher o correto é essencial para construir UIs funcionais, então é conhecimento foundacional que você deve dominar. A distinção — **StatelessWidget** (imutável, descrevendo a UI puramente com base em suas entradas, nunca mudando por si próprio) versus **StatefulWidget** (mantendo estado mutável que pode mudar, reconstruindo a UI quando isso acontece) — é um dos primeiros e mais importantes conceitos em Flutter, determinando como você constrói qualquer widget. Entender que **StatelessWidget** é adequado para UI que não muda por si própria (conteúdo estático, exibições com base em entradas — a maioria dos widgets, e mais simples) enquanto **StatefulWidget** é necessário para qualquer coisa com estado interno mutável (contadores, formulários, alternadores, elementos interativos) é essencial para escolher corretamente. Mais criticamente, entender **setState** — o mecanismo que diz ao Flutter que o estado mudou, acionando uma reconstrução para que a UI seja atualizada (e que sem ele, mudar uma variável não atualizará a UI, um erro muito comum para iniciantes) — é fundamental para fazer StatefulWidgets funcionarem. Entender que um StatefulWidget combina uma configuração de widget imutável com um objeto State separado mantendo o estado mutável clarifica sua estrutura. A orientação para **preferir StatelessWidget quando possível** (mais simples) e usar StatefulWidget apenas quando há necessidade de mudar estado reflete boa prática. Como praticamente todo widget Flutter que você constrói é um desses dois tipos e escolher corretamente (e usar setState adequadamente) é essencial para construir UIs funcionais e interativas, entender StatelessWidget versus StatefulWidget — sua diferença, quando usar cada um, e o papel crítico de setState — é conhecimento essencial e foundacional em Flutter, um dos conceitos mais fundamentais no desenvolvimento Flutter que todo desenvolvedor Flutter deve entender para construir interfaces de usuário funcionais.