Stateless vs Stateful

Put simply, Flutter widgets can be split into ones that don't change and ones that can. StatelessWidget is used for UI whose data/state never changes, while StatefulWidget is used when the UI needs to change in response to things like user actions, timers, or API data.

dart

class GreetingText extends StatelessWidget {
  const GreetingText({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('မင်္ဂလာပါ Flutter');
  }
}

class TapCounter extends StatefulWidget {
  const TapCounter({super.key});

  @override
  State<TapCounter> createState() => _TapCounterState();
}

class _TapCounterState extends State<TapCounter> {
  int taps = 0;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        setState(() {
          taps++;
        });
      },
      child: Text('Tapped $taps times'),
    );
  }
}

You should see

GreetingText shows unchanging text, and each time you tap the TapCounter button, the count goes up.

What's Next

In the Basic Widgets lesson, get hands-on with the UI widgets you'll use the most.

Easy traps

If you change a state variable without calling setState(), the value may update, but the UI often won't re-render.