What is the difference between StatelessWidget and StatefulWidget?

Question

Accepted Answer

Flutter has two fundamental widget types: **StatelessWidget** (immutable, no internal state that changes) and **StatefulWidget** (can hold and update mutable state, rebuilding when state changes). Choosing the right one is fundamental to building Flutter UIs. ## StatelessWidget — no changing state ```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 — has mutable state ```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 — the key to 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) ``` ## Choosing ```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. ``` ## Why it matters Understanding the difference between StatelessWidget and StatefulWidget is fundamental to Flutter development because choosing the right one is essential to building working UIs, so it's must-know foundational knowledge. The distinction — **StatelessWidget** (immutable, describing UI purely based on its inputs, never changing on its own) versus **StatefulWidget** (holding mutable state that can change, rebuilding the UI when it does) — is one of the first and most important concepts in Flutter, determining how you build any widget. Understanding that **StatelessWidget** suits UI that doesn't change itself (static content, displays based on inputs — the majority of widgets, and simpler) while **StatefulWidget** is needed for anything with changing internal state (counters, forms, toggles, interactive elements) is essential for choosing correctly. Most critically, understanding **setState** — the mechanism that tells Flutter state has changed, triggering a rebuild so the UI updates (and that without it, changing a variable won't update the UI, a very common beginner mistake) — is fundamental to making StatefulWidgets work. Understanding that a StatefulWidget combines an immutable widget configuration with a separate State object holding the mutable state clarifies its structure. The guidance to **prefer StatelessWidget when possible** (simpler) and use StatefulWidget only when changing state is needed reflects good practice. Since virtually every Flutter widget you build is one of these two types and choosing correctly (and using setState properly) is essential to building functional, interactive UIs, understanding StatelessWidget vs StatefulWidget — their difference, when to use each, and the critical role of setState — is essential, foundational Flutter knowledge, one of the most fundamental concepts in Flutter development that every Flutter developer must understand to build working user interfaces.