Ce înțelegeți prin randare?

Redarea în Flutter este procesul de transformare a arborelui de widget-uri (widget tree) într-un arbore de elemente (element tree), apoi într-un arbore de randare (render tree), care în cele din urmă este afișat pe ecran.

Pașii principali:

1. Arborele de Widget-uri: Descriere declarativă a interfeței utilizatorului.
2. Arborele de Elemente: Interpretarea arborelui de widget-uri, conține referințe la instanțele de widget-uri și la starea widget-urilor (pentru StatefulWidget). Arborele de elemente acționează ca o punte între arborele de widget-uri și arborele de randare.
3. Arborele de Randare: Conține obiecte RenderObject, care știu cum să se deseneze pe sine (paint) și cum să determine dimensiunea și poziția (layout). Este un arbore abstract, independent de platformă.
4. Pictură și Compoziție: Comenzile de desen independente de GPU sunt trimise la Skia (motorul grafic Flutter), care le convertește în comenzi dependente de GPU.
5. Rasterizare: GPU-ul desenează comenzile pe pixeli pe ecran.
6. Afișare: Pixeli sunt afișați pe ecranul dispozitivului.

Ciclul de randare și construcție a layout-ului are loc atunci când există o schimbare de stare care necesită re-desene, sau când un cadru este activat prin Scheduler. Scheduler planifică executarea funcțiilor, inclusiv build (pentru construirea arborelui de elemente) și layout / paint (pentru arborele de randare).

// Exemplu de widget simplu
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Fiecare widget descrie o parte a interfeței utilizatorului.
    // Flutter transformă această descriere în elemente și obiecte de randare.
    return Container(
      color: Colors.blue,
      child: Text('Hello'),
    );
  }
}