¿Qué entiendes por renderizado?

El renderizado en Flutter es el proceso de convertir el árbol de widgets en un árbol de elementos, luego en un árbol de renderizado, que finalmente se muestra en la pantalla.

Pasos principales:

1. Árbol de Widgets: Descripción declarativa de la interfaz de usuario.
2. Árbol de Elementos: Interpretación del árbol de widgets, contiene referencias a las instancias de widgets y al estado de los widgets (para StatefulWidget). El árbol de elementos actúa como un puente entre el árbol de widgets y el árbol de renderizado.
3. Árbol de Renderizado: Contiene objetos RenderObject, que saben cómo dibujarse a sí mismos (paint) y cómo determinar su tamaño y posición (layout). Es un árbol abstracto, independiente de la plataforma.
4. Pintura y Composición: Las órdenes de dibujo independientes de la GPU se envían a Skia (motor gráfico de Flutter), que las convierte en órdenes dependientes de la GPU.
5. Rasterización: La GPU dibuja las órdenes en los píxeles de la pantalla.
6. Visualización: Los píxeles se muestran en la pantalla del dispositivo.

El ciclo de renderizado y construcción del diseño ocurre cuando hay un cambio de estado que requiere volver a dibujar, o cuando se activa un frame a través de Scheduler. Scheduler programa la ejecución de funciones, incluyendo build (para construir el árbol de elementos) y layout / paint (para el árbol de renderizado).

// Ejemplo de un widget simple
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Cada widget describe una parte de la interfaz de usuario.
    // Flutter transforma esta descripción en elementos y objetos de renderizado.
    return Container(
      color: Colors.blue,
      child: Text('Hello'),
    );
  }
}