Wat is het verschil tussen Stateful en Stateless widgets?

• StatelessWidget:

  • Heeft geen interne toestand die in de loop van de tijd kan veranderen.
  • De parameters van de widget worden ingesteld bij het maken en blijven gedurende de hele levenscyclus ongewijzigd.
  • Wordt gebruikt voor het weergeven van statische gegevens.
  • Hertekening gebeurt alleen bij het opnieuw opbouwen van de bovenliggende widget.
  • Wordt geïmplementeerd met de build()-methode.

• StatefulWidget:

  • Heeft een interne toestand (State) die kan veranderen als reactie op gebeurtenissen (gebruikersacties, netwerkverzoeken, enz.).
  • De hertekening van de widget gebeurt wanneer setState() wordt aangeroepen.
  • Wordt gebruikt voor het maken van interactieve elementen en het weergeven van dynamische gegevens.
  • Bestaat uit twee delen: de StatefulWidget zelf en het bijbehorende State-object.

Kenmerk	StatelessWidget	StatefulWidget
Toestand	Heeft geen	Heeft een wijzigbare toestand (State)
Hertekening	Bij herbouw van de bovenliggende widget	Bij het aanroepen van setState()
Gebruik	Statistische gegevens, niet-interactieve elementen	Interactieve elementen, dynamische gegevens
Implementatie	Alleen de build()-methode	createState() en lifecycle-methoden in State

// Voorbeeld van StatelessWidget
class MyStatelessWidget extends StatelessWidget {
  final String text;

  MyStatelessWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Text(text); // Toont gewoon de meegegeven tekst
  }
}

// Voorbeeld van StatefulWidget
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0; // Interne toestand

  void _incrementCounter() {
    setState(() {
      // Verandert de toestand en veroorzaakt hertekening
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Teller:'),
        Text('$_counter'),
        ElevatedButton(
          onPressed: _incrementCounter, // Methode wordt aangeroepen bij drukken
          child: Text('Verhoog'),
        ),
      ],
    );
  }
}