Was verstehst du unter Rendering?

Das Rendern in Flutter ist der Prozess, bei dem der Widget-Baum in einen Elementbaum, dann in einen Render-Baum umgewandelt wird, der schließlich auf dem Bildschirm angezeigt wird.

Hauptschritte:

1. Widget-Baum: Deklarative Beschreibung der Benutzeroberfläche.
2. Element-Baum: Interpretation des Widget-Baums, enthält Referenzen auf Widget-Instanzen und den Zustand der Widgets (für StatefulWidget). Der Element-Baum dient als Brücke zwischen Widget-Baum und Render-Baum.
3. Render-Baum: Enthält RenderObject-Objekte, die wissen, wie sie sich selbst zeichnen (paint) und ihre Größe und Position bestimmen (layout). Es ist ein abstrakter Baum, plattformunabhängig.
4. Painting & Composition: GPU-unabhängige Zeichenbefehle werden an Skia (Flutter-Grafik-Engine) gesendet, die sie in GPU-abhängige Befehle umwandelt.
5. Rasterisierung: Die GPU zeichnet die Befehle auf die Pixel des Bildschirms.
6. Anzeige: Die Pixel werden auf dem Bildschirm des Geräts angezeigt.

Der Render- und Layout-Zyklus findet bei Zustandsänderungen statt, die eine Neuzeichnung erfordern, oder wenn ein Frame durch Scheduler aktiviert wird. Der Scheduler plant die Ausführung von Funktionen, einschließlich build (zum Erstellen des Elementbaums) und layout / paint (für den Render-Baum).

// Beispiel eines einfachen Widgets
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Jedes Widget beschreibt einen Teil der Benutzeroberfläche.
    // Flutter wandelt diese Beschreibung in Elemente und Render-Objekte um.
    return Container(
      color: Colors.blue,
      child: Text('Hello'),
    );
  }
}