Welke soorten widgets zijn er in Flutter?

In Flutter worden widgets onderverdeeld in twee hoofdcategorieën:

• StatelessWidget: Widgets waarvan de toestand niet verandert na de initiële samenstelling. Ze beschrijven een deel van de gebruikersinterface dat niet afhankelijk is van runtimegegevens.
• StatefulWidget: Widgets met een wijzigbare toestand. Ze hebben een gekoppeld State-object dat wijzigbare gegevens bevat en een mechanisme biedt om het widget opnieuw te bouwen bij een wijziging van de toestand.

Daarnaast kunnen widgets worden gecategoriseerd op basis van hun doel:

• Lay-out widgets: Beheren de positionering van andere widgets op het scherm (bijvoorbeeld Row, Column, Stack).
• Material Components / Cupertino widgets: Bieden kant-en-klare UI-elementen die voldoen aan Material Design (Android) of Cupertino (iOS) richtlijnen (bijvoorbeeld AppBar, Button, TextField).
• Invoer widgets: Stellen de gebruiker in staat om interactie te hebben met de app (bijvoorbeeld TextField, Checkbox, Slider).
• Interactieve widgets: Reageren op gebruikersgebaren (bijvoorbeeld GestureDetector, InkWell).
• Schilder- & Effect-widgets: Toepassen grafische effecten (bijvoorbeeld Opacity, ClipRRect).
• Scroll-widgets: Zorgt voor scrollen van inhoud (bijvoorbeeld ListView, GridView).

Widgets kunnen worden gemaakt op basis van:

• Primitief: Basisbouwstenen (bijvoorbeeld Container, Text, Icon).
• Samenstellend: Gemaakt uit andere widgets.

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

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // Verander de toestand en herteken
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Teller:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Verhoog',
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}

// Voorbeeld van StatelessWidget
class TitleWidget extends StatelessWidget {
  final String title;

  TitleWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(fontSize: 24),
    );
  }
}