Mit ért a renderelés fogalmán?

A Flutter-ben a renderelés az a folyamat, amikor a widget fa (widget tree) átalakul elem fává (element tree), majd render fává (render tree), amely végül a képernyőn jelenik meg.

Fő lépések:

1. Widget Fa: A felhasználói felület deklaratív leírása.
2. Elem Fa: A widget fa értelmezése, amely hivatkozásokat tartalmaz a widget példányokra és a widget állapotára (a StatefulWidget esetén). Az elem fa hidat képez a widget fa és a render fa között.
3. Render Fa: Tartalmaz RenderObject objektumokat, amelyek tudják, hogyan rajzolják magukat (paint), és hogyan határozzák meg a méretüket és pozíciójukat (layout). Ez egy platformfüggetlen absztrakt fa.
4. Festés és Kompozíció: A GPU-független rajzolási parancsokat a Skia (a Flutter grafikus motorja) kapja, amely GPU-függő parancsokká alakítja őket.
5. Rasterizáció: A GPU a parancsokat a képernyő pixeleire rajzolja.
6. Megjelenítés: A pixelek a készülék képernyőjén jelennek meg.

A renderelési és elrendezési ciklus akkor történik, amikor állapotváltozás miatt újra kell rajzolni, vagy amikor a Scheduler aktivál egy frame-et. A Scheduler tervezi a build (az elem fa felépítése) és a layout / paint (a render fa) függvények végrehajtását.

// Egyszerű widget példa
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Minden widget a felhasználói felület egy részét írja le.
    // A Flutter ezt az leírást elemekre és RenderObject-ekre alakítja.
    return Container(
      color: Colors.blue,
      child: Text('Hello'),
    );
  }
}