Saltar al contenido principal

Renderizadores web

Elección de modos de compilación y renderizadores para una aplicación web de Flutter.

Flutter web ofrece dos modos de compilación y dos renderizadores. Los dos modos de compilación son el por defecto y WebAssembly, y los dos renderizadores son canvaskit y skwasm.

Flutter elige el modo de compilación al compilar la aplicación, y determina qué renderizadores están disponibles en tiempo de ejecución.

Para una compilación por defecto, Flutter elige el renderizador canvaskit en tiempo de ejecución. Para una compilación WebAssembly, Flutter elige el renderizador skwasm en tiempo de ejecución, y recurre a canvaskit si el navegador no soporta skwasm.

Modos de compilación

#

Modo de compilación por defecto

#

Flutter elige el modo por defecto cuando se usan los comandos flutter run o flutter build web sin pasar --wasm, o al pasar --no-wasm.

Este modo de compilación solo usa el renderizador canvaskit.

Para ejecutar en Chrome usando el modo de compilación por defecto:

flutter run -d chrome

Para compilar tu aplicación para release usando el modo de compilación por defecto:

flutter build web

Modo de compilación WebAssembly

#

Este modo se habilita pasando --wasm a los comandos flutter run y flutter build web.

Este modo hace que tanto skwasm como canvaskit estén disponibles. skwasm requiere WasmGC, que aún no es soportado por todos los navegadores modernos. Por lo tanto, en tiempo de ejecución Flutter elige skwasm si el recolector de basura es soportado, y recurre a canvaskit si no lo es. Esto permite que las aplicaciones compiladas en el modo WebAssembly sigan funcionando en todos los navegadores modernos.

La flag --wasm no es soportada por plataformas que no sean web.

Para ejecutar en Chrome usando el modo WebAssembly:

flutter run -d chrome --wasm

Para compilar tu aplicación para release usando el modo WebAssembly:

flutter build web --wasm

Renderizadores

#

Flutter tiene dos renderizadores (canvaskit y skwasm) que vuelven a implementar el motor de Flutter para ejecutarse en el navegador. El renderizador convierte primitivas de UI (almacenadas como objetos Scene) en píxeles.

canvaskit

#

El renderizador canvaskit es compatible con todos los navegadores modernos, y es el renderizador que se utiliza en el modo de compilación por defecto.

Incluye una copia de Skia compilada a WebAssembly, lo que añade alrededor de 1.5MB al tamaño de descarga.

skwasm

#

El renderizador skwasm es una versión más compacta de Skia que está compilada a WebAssembly y soporta renderizado en un hilo separado.

Este renderizador debe usarse con el modo de compilación WebAssembly, el cual compila el código Dart a WebAssembly.

Para aprovechar múltiples hilos, el servidor web debe cumplir con los requisitos de seguridad de SharedArrayBuffer. En este modo, Flutter utiliza un web worker dedicado para descargar parte de la carga de trabajo de renderizado a un hilo separado, aprovechando múltiples núcleos de CPU. Si el navegador no cumple con estos requisitos, el renderizador skwasm se ejecuta en una configuración de un solo hilo.

Este renderizador incluye una versión más compacta de Skia compilada a WebAssembly, añadiendo alrededor de 1.1MB al tamaño de descarga.

Elegir un renderizador en tiempo de ejecución

#

Por defecto, al compilar en modo WebAssembly, Flutter decidirá cuándo usar skwasm y cuándo recurrir a canvaskit. Esto se puede anular pasando un objeto de configuración al cargador, de la siguiente manera:

  1. Compila la aplicación con la flag --wasm para que los renderizadores skwasm y canvaskit estén disponibles para la aplicación.
  2. Configura la inicialización personalizada de la aplicación web como se describe en Escribir un flutter_bootstrap.js personalizado.
  3. Prepara un objeto de configuración con la propiedad renderer establecida en "canvaskit" o "skwasm".
  4. Pasa tu objeto de configuración preparado como la propiedad config de un nuevo objeto al método _flutter.loader.load proporcionado por el código inyectado anteriormente.

Ejemplo:

html 
<body>
  <script>
    {{flutter_js}}
    {{flutter_build_config}}
​
    // TODO: Replace this with your own code to determine which renderer to use.
    const useCanvasKit = true;
​
    const config = {
      renderer: useCanvasKit ? "canvaskit" : "skwasm",
    };
    _flutter.loader.load({
      config: config,
    });
  </script>
</body>

El renderizador web no se puede cambiar después de llamar al método load. Por lo tanto, cualquier decisión sobre qué renderizador usar debe tomarse antes de llamar a _flutter.loader.load.

Elegir qué modo de compilación usar

#

Para compilar Dart a WebAssembly, tu aplicación y sus plugins / paquetes deben cumplir con los siguientes requisitos:

  • Usar la nueva JS Interop - El código solo debe usar la nueva librería de JS interop dart:js_interop. Los estilos antiguos dart:js, dart:js_util y package:js ya no están soportados.
  • Usar nuevas Web APIs - El código que usa Web APIs debe usar el nuevo package:web en lugar de dart:html.
  • Compatibilidad de números - WebAssembly implementa los tipos numéricos int y double de Dart exactamente igual que la Dart VM. En JavaScript estos tipos se emulan usando el tipo JS Number. Es posible que tu código dependa accidental o intencionadamente del comportamiento de JS para los números. Si es así, dicho código debe actualizarse para comportarse correctamente con el comportamiento de la Dart VM.

Usa estos consejos para decidir qué modo usar:

  • Soporte de paquetes - Elige el modo por defecto si tu aplicación depende de plugins y paquetes que aún no soportan WebAssembly.
  • Rendimiento - Elige el modo WebAssembly si el código y los paquetes de tu aplicación son compatibles con WebAssembly y el rendimiento de la aplicación es importante. skwasm tiene un tiempo de inicio de la aplicación y un rendimiento de frames notablemente mejores en comparación con canvaskit. skwasm es particularmente efectivo en modo multihilo, así que considera configurar el servidor de manera que cumpla con los requisitos de seguridad de SharedArrayBuffer.

A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-05. Ver código fuente oreportar un problema.