Wat verstaat u onder rendering?

Rendering in Flutter is het proces waarbij de widgetboom wordt omgezet in een elementboom, vervolgens in een renderboom, die uiteindelijk op het scherm wordt weergegeven.

Belangrijkste stappen:

1. Widget Tree: Declaratieve beschrijving van de gebruikersinterface.
2. Element Tree: Interpretatie van de widgetboom, bevat verwijzingen naar widget-instanties en de status van widgets (voor StatefulWidget). De elementboom fungeert als een brug tussen de widgetboom en de renderboom.
3. Render Tree: Bevat RenderObject-objecten die weten hoe ze zichzelf moeten tekenen (paint) en hoe ze hun grootte en positie bepalen (layout). Dit is een abstracte, platformonafhankelijke boom.
4. Painting & Composition: GPU-onafhankelijke tekenopdrachten worden naar Skia (Flutter's grafische motor) gestuurd, die ze omzet in GPU-afhankelijke opdrachten.
5. Rasterization: De GPU tekent de opdrachten op de pixels van het scherm.
6. Display: De pixels worden op het apparaatenscherm weergegeven.

De render- en lay-outcyclus vindt plaats bij een wijziging in de toestand die hertekening vereist, of wanneer een frame wordt geactiveerd via Scheduler. Scheduler plant de uitvoering van functies, inclusief build (voor het bouwen van de elementboom) en layout / paint (voor de renderboom).

// Voorbeeld van een eenvoudige widget
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Elke widget beschrijft een deel van de gebruikersinterface.
    // Flutter zet deze beschrijving om in elementen en RenderObjects.
    return Container(
      color: Colors.blue,
      child: Text('Hello'),
    );
  }
}