O que entende por renderização?

A renderização no Flutter é o processo de transformar a árvore de widgets numa árvore de elementos, depois numa árvore de renderização, que é finalmente exibida na tela.

Principais passos:

1. Árvore de Widgets: Descrição declarativa da interface do utilizador.
2. Árvore de Elementos: Interpretação da árvore de widgets, contendo referências às instâncias de widgets e ao estado dos widgets (para StatefulWidget). A árvore de elementos funciona como uma ponte entre a árvore de widgets e a árvore de renderização.
3. Árvore de Renderização: Contém objetos RenderObject, que sabem como se desenhar a si próprios (paint) e como determinar o seu tamanho e posição (layout). É uma árvore abstrata, independente da plataforma.
4. Pintura e Composição: As ordens de desenho independentes da GPU são enviadas ao Skia (motor gráfico do Flutter), que as converte em ordens dependentes da GPU.
5. Rasterização: A GPU desenha as ordens nos pixels do ecrã.
6. Exibição: Os pixels são exibidos no ecrã do dispositivo.

O ciclo de renderização e construção do layout ocorre quando há uma mudança de estado que requer uma nova pintura, ou quando um frame é ativado através do Scheduler. O Scheduler planeia a execução de funções, incluindo build (para construir a árvore de elementos) e layout / paint (para a árvore de renderização).

// Exemplo de um widget simples
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Cada widget descreve uma parte da interface do utilizador.
    // O Flutter transforma esta descrição em elementos e objetos de renderização.
    return Container(
      color: Colors.blue,
      child: Text('Hello'),
    );
  }
}