Welche Arten von Widgets gibt es in Flutter?

In Flutter werden Widgets in zwei Hauptkategorien unterteilt:

• StatelessWidget: Widgets, deren Zustand sich nach der initialen Erstellung nicht ändert. Sie beschreiben einen Teil der Benutzeroberfläche, der nicht von Laufzeitdaten abhängt.
• StatefulWidget: Widgets mit veränderlichem Zustand. Sie haben ein zugehöriges State-Objekt, das veränderbare Daten enthält und einen Mechanismus bereitstellt, um das Widget bei Zustandsänderungen neu zu zeichnen.

Außerdem können Widgets nach ihrem Zweck klassifiziert werden:

• Layout-Widgets: Steuern die Anordnung anderer Widgets auf dem Bildschirm (z.B. Row, Column, Stack).
• Material-Komponenten / Cupertino-Widgets: Bieten fertige UI-Elemente, die den Material Design-Richtlinien (Android) oder Cupertino (iOS) entsprechen (z.B. AppBar, Button, TextField).
• Eingabe-Widgets: Ermöglichen die Interaktion des Nutzers mit der Anwendung (z.B. TextField, Checkbox, Slider).
• Interaktive Widgets: Reagieren auf Gesten des Nutzers (z.B. GestureDetector, InkWell).
• Zeichen- & Effekte-Widgets: Wenden grafische Effekte an (z.B. Opacity, ClipRRect).
• Scroll-Widgets: Ermöglichen das Scrollen von Inhalten (z.B. ListView, GridView).

Widgets können je nach Erstellungsart sein:

• Primitive: Grundlegende Bausteine (z.B. Container, Text, Icon).
• Komposite: Bestehen aus anderen Widgets.

// Beispiel für StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

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

  void _incrementCounter() {
    setState(() {
      // Zustand ändern und neu zeichnen
      _counter++;
    });
  }

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

// Beispiel für StatelessWidget
class TitleWidget extends StatelessWidget {
  final String title;

  TitleWidget({required this.title});

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