Co rozumiesz przez renderowanie?

Renderowanie w Flutter to proces przekształcania drzewa widżetów (widget tree) w drzewo elementów (element tree), a następnie w drzewo renderowania (render tree), które ostatecznie jest wyświetlane na ekranie.

Główne kroki:

1. Drzewo Widżetów: Deklaratywny opis interfejsu użytkownika.
2. Drzewo Elementów: Interpretacja drzewa widżetów, zawiera odwołania do instancji widżetów i stanu widżetów (dla StatefulWidget). Drzewo elementów działa jako pomost między drzewem widżetów a drzewem renderowania.
3. Drzewo Renderowania: Zawiera obiekty RenderObject, które wiedzą, jak się rysować (paint) i jak określić swój rozmiar i pozycję (layout). To abstrakcyjne drzewo, niezależne od platformy.
4. Rysowanie i Kompozycja: Komendy rysowania niezależne od GPU są wysyłane do Skia (silnik graficzny Flutter), który konwertuje je na komendy zależne od GPU.
5. Rasteryzacja: GPU rysuje komendy na pikselach ekranu.
6. Wyświetlanie: Piksele są wyświetlane na ekranie urządzenia.

Cykl renderowania i budowania układu zachodzi przy zmianie stanu, która wymaga ponownego rysowania, lub przy aktywacji ramki przez Scheduler. Scheduler planuje wykonanie funkcji, w tym build (do budowania drzewa elementów) i layout / paint (do drzewa renderowania).

// Przykład prostego widżetu
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Każdy widżet opisuje część interfejsu użytkownika.
    // Flutter przekształca ten opis w elementy i obiekty renderowania.
    return Container(
      color: Colors.blue,
      child: Text('Hello'),
    );
  }
}