¿Cómo usar Skia / CanvasKit en Flutter Web?

Solución:

Puedes habilitar CanvasKit / Skia en Flutter Web suministrando una constante de entorno Dart:

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true

los flutter las herramientas ahora tienen un buen atajo para ello:

flutter run -d chrome --web-renderer canvaskit

los --dart-define=FLUTTER_WEB_USE_SKIA=true El parámetro establecerá la constante para usar Skia. También deberá proporcionárselo a flutter build web:

flutter build web --web-renderer canvaskit

Aprender más acerca de renderizadores web en Flutter.

Opciones

Hay tres opciones para --web-renderer:

• auto (default) – elige automáticamente qué renderizador usar. Esta opción elige el renderizador HTML cuando la aplicación se ejecuta en un navegador móvil y el renderizador CanvasKit cuando la aplicación se ejecuta en un navegador de escritorio.
• html – utilice siempre el renderizador HTML.
• canvaskit – utilice siempre el renderizador CanvasKit.

Ver Elegir que opción usar para decidir qué opción debe utilizar.

Alternativas

Lo que describí anteriormente se puede encontrar en el flutter/engine/initialization.dart expediente. Asegúrese de comprobar el master branch para ver si la información aún está actualizada.

Allí, puede ver otras opciones para configurar Flutter Web para usar CanvasKit:

FLUTTER_WEB_AUTO_DETECT

--dart-define=FLUTTER_WEB_AUTO_DETECT=true

Esto ahora también se puede hacer usando:

--web-renderer auto

El suministro de esta constante habilitará la detección automática para la detección del renderizador:

• CanvasKit se utilizará en dispositivos de escritorio.

• HTML se utilizará en dispositivos móviles.

Esto solo es cierto si no especifica window.flutterWebRenderer.

window.flutterWebRenderer

Si habilita la detección automática (ver arriba), puede especificar el renderizador en su código JavaScript / archivo HTML de forma dinámica:

  ...

  <script>
    window.flutterWebRenderer="canvaskit";
  </script>

  <script src="https://foroayuda.es/main.dart.js" type="application/javascript"></script>
  ...

Resumen

Después de descubrir el PR de detección automática, realmente aprecio el siguiente resumen de la situación actual allí:

Si la detección automática está habilitada (establecido por la variable de entorno FLUTTER_WEB_AUTO_DETECT), los desarrolladores podrán configurar window.flutterWebRender a canvaskit o html para seleccionar el backend de renderizado. Si window.flutterWebRender no está configurado, el motor de aleteo utilizará canvaskit para dispositivo de escritorio mientras usa html para dispositivo móvil. Si window.flutterWebRender se establece en un valor no válido (no canvaskit ni html), por defecto será html.

Si la detección automática está deshabilitada, verificará el valor de la variable de entorno FLUTTER_WEB_USE_SKIA. Si es cierto, use canvaksit. De lo contrario, use html.

---

---

Utiliza Nuestro Buscador