¿Qué sabes sobre la estructura interna de Flutter?

El núcleo de Flutter consiste en el motor, el marco y los widgets.

• Motor de Flutter: Escrito en C++ y proporciona una API de bajo nivel para renderizado, manejo de texto, hilos y plugins. Interactúa directamente con la plataforma (iOS, Android, Web, Escritorio) y las API gráficas (por ejemplo, Skia). El motor gestiona el renderizado, operaciones asíncronas y el ciclo de vida de la aplicación.

• Marco de Flutter (Framework): Escrito en Dart y proporciona una capa de abstracción sobre el motor. Incluye múltiples componentes listos para usar:

  • Fundación: Clases básicas y funciones auxiliares.
  • Renderizado: Capa para gestionar el árbol de objetos de renderizado y su dibujo.
  • Widgets: Bloques básicos de construcción de UI que forman el árbol de widgets.
  • Material Design y Cupertino: Conjuntos de widgets que implementan estilos Material Design y diseño estilo iOS.

• Widgets: En Flutter todo es un widget. Los widgets describen la configuración de la UI. Hay dos tipos principales:

  • StatelessWidget: Widget sin estado interno mutable. Su UI depende solo de sus parámetros de entrada (properties).
  • StatefulWidget: Widget que puede tener un estado mutable. Consiste en el widget en sí y un objeto State, donde se almacena el estado y la lógica de construcción de la UI (build).

Proceso de renderizado:

1. Construcción: El framework llama al método build() del widget, que devuelve un árbol de otros widgets.
2. Árbol de Elementos: Basándose en el árbol de widgets, se crea un árbol de elementos (Element Tree), que representa la estructura de la UI. Los elementos vinculan los widgets con los objetos de renderizado correspondientes.
3. Árbol de Objetos de Renderizado: Los elementos crean y gestionan el árbol de objetos de renderizado (Render Object Tree). Los objetos de renderizado son responsables del layout, pintado y hit testing.
4. Pintado: El motor usa Skia (en móviles y escritorio) o CanvasKit (en web) para dibujar los objetos de renderizado en la pantalla.

Programación Reactiva:

Flutter usa un enfoque reactivo para construir la UI. Cuando cambia el estado de la aplicación, el framework reconstruye esa parte del árbol de widgets que depende de ese estado. Esto se realiza de forma automática y eficiente gracias al mecanismo de diffing y a la rápida creación y destrucción de widgets.

Recarga en caliente (Hot Reload) y Reinicio en caliente (Hot Restart):

• Hot Reload: Inserta el código Dart actualizado en la aplicación en ejecución sin perder el estado. Ideal para iteraciones rápidas de UI.
• Hot Restart: Reinicia la aplicación desde cero con el código actualizado y el estado restablecido. Se usa cuando Hot Reload no funciona, por ejemplo, al cambiar en initState o variables globales.

Código específico de plataforma:

Flutter permite interactuar con las API nativas de la plataforma mediante canales de plataforma (Platform Channels). Esto permite llamar a métodos del código nativo (Java/Kotlin en Android, Swift/Objective-C en iOS) y recibir resultados de vuelta en Dart.

// Ejemplo de uso de Platform Channel
import 'package:flutter/services.dart';

static const platform = MethodChannel('samples.flutter.dev/battery');

Future<void> getBatteryLevel() async {
  String batteryLevel;
  try {
    final int result = await platform.invokeMethod('getBatteryLevel');
    batteryLevel = 'Nivel de batería: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "No se pudo obtener el nivel de batería: '${e.message}'.";
  }
  // Actualizar UI
}