Docs

Documentación de los runtimes que hay detrás de casos límite reales.

Tres paquetes Flutter con un objetivo concreto: un runtime SVG completo, un pipeline de fuentes WOFF/WOFF2 y un único motor JavaScript moderno para todas las plataformas nativas. Empieza por el problema y copia después el ejemplo más pequeño que funcione.

01 · Flutter package

full_svg_flutter

Mantén el SVG como formato fuente dentro de Flutter.

Version: 1.4.2
Pub points: 140 / 160
License: MIT

Por qué existe

Los iconos estáticos son solo una pequeña parte del SVG. Los assets de producto pueden depender de SMIL, animación CSS, morphing, filtros, texto o un reproductor JavaScript inline. Convertirlos añade una segunda fuente de verdad; un WebView añade un segundo sistema de renderizado.

Instalación

flutter pub add full_svg_flutter

Inicio rápido

import 'package:full_svg_flutter/full_svg_flutter.dart';

// Static or animated — the runtime detects the document.
FSvgPicture.asset(
  'assets/hero.svg',
  width: 240,
  semanticsLabel: 'Product illustration',
);

// Existing static flutter_svg usage can keep the familiar API.
SvgPicture.asset('assets/icon.svg');

Cobertura

Static SVG and DOM-preserving rendering
SMIL and CSS @keyframes animation
Path morphing and motion paths
All 17 SVG filter primitives
Masks, clipping, gradients, patterns, and rich text
Inline JavaScript and SVGator exports
Playback control and SVG <view> navigation
flutter_svg-compatible static API

Cómo funciona

El paquete analiza el documento SVG en su propio modelo, que conserva el DOM, evalúa el estilo y el estado de la animación y después pinta a través de Flutter. El contenido estático y el animado comparten el mismo motor. JavaScript solo se inicia cuando hay un elemento script, y no antes.

Úsalo cuando

Recibes SVG animados o assets de SVGator y no puedes cambiar el formato de origen.
Necesitas fidelidad en filtros, máscaras, texto o animación más allá del renderizado de iconos estáticos.
Quieres una API al estilo de flutter_svg y una ruta de migración sin WebView.

Mapa de la API

FSvgPicture: Widget principal para assets estáticos o animados desde asset, red, string, archivo o bytes.
SvgPicture: Punto de entrada estático compatible con flutter_svg.
AnimatedSvgController: Reproduce, pausa, hace seek, cambia la velocidad o la dirección y alterna vistas SVG.
renderSvgToPicture: Graba un SVG en un Picture para pintado personalizado o rasterización.
svg.cache: Caché configurable de fuentes decodificadas, compartida entre widgets.

Antes de publicar

Es un runtime SVG, no un DOM de navegador completo; foreignObject y los frameworks que dependen del navegador quedan fuera del alcance.
Valida visualmente los assets con filtros complejos y texto de dirección mixta antes de la release.

02 · Flutter package

woff2

Carga contenedores de fuentes web a través del FontLoader de Flutter.

Version: 0.1.0
Pub points: 150 / 160
License: Apache-2.0

Por qué existe

Flutter acepta TTF/OTF a través de FontLoader, pero no decodifica WOFF ni WOFF2. Pasar directamente los bytes comprimidos de una fuente web puede producir cajas de glifos ausentes sin ningún error útil.

Instalación

flutter pub add woff2

Inicio rápido

import 'package:flutter/material.dart';
import 'package:woff2/woff2.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await loadWoffFontFromAsset(
    fontFamily: 'Inter',
    assetPath: 'assets/fonts/Inter.woff2',
  );
  runApp(const MyApp());
}

Cobertura

WOFF1 and WOFF2 to SFNT decoding
One-call Flutter FontLoader integration
Pure-Dart font pipeline for app code
CSS @font-face parsing
Batch registration for weights and styles
Embedded data: URL fonts
Low-level byte decoder
35 focused unit tests in the public package

Cómo funciona

El decoder reconstruye los bytes SFNT a partir de WOFF1/WOFF2 y registra el resultado con FontLoader. Un parser de CSS y un registro cubren SVG, HTML, EPUB y otros pipelines de contenido que llevan reglas @font-face.

Úsalo cuando

Un SVG, un EPUB, una exportación HTML o un asset de diseño incrusta fuentes WOFF/WOFF2.
Necesitas cargar una fuente descargada en tiempo de ejecución o guardada como un asset normal.
Estás construyendo un renderizador y necesitas convertir bytes WOFF de bajo nivel a SFNT.

Mapa de la API

loadWoffFontFromAsset: Decodifica y registra un asset WOFF/WOFF2 empaquetado en una sola llamada.
loadWoffFontFromBytes: Registra bytes de fuente obtenidos de la red, del disco o de memoria.
WoffFontRegistry: Registra por lotes familias, pesos y estilos.
extractFontFaceRules: Extrae reglas @font-face, incluidas data URLs y valores entre comillas.
decodeFontIfWoff: Detección de contenedor de bajo nivel y conversión a bytes SFNT.

Antes de publicar

Las colecciones WOFF2 TTC no están soportadas en la 0.1.0.
Flutter Web ya gestiona WOFF2 en el navegador; el paquete está pensado para las plataformas nativas de Flutter.

03 · Flutter package

quickjs_engine

Ejecuta el mismo motor JavaScript moderno en todas las plataformas Flutter.

Version: 0.1.3
Pub points: 120 / 160
License: MIT

Por qué existe

Una combinación de JavaScriptCore y un QuickJS antiguo puede comportarse distinto en cada plataforma, sobre todo en casos límite numéricos, Proxy, iteración, Promises o runtimes de animación. Esa divergencia es difícil de reproducir y todavía más difícil de dar por fiable.

Instalación

flutter pub add quickjs_engine

Inicio rápido

import 'package:quickjs_engine/quickjs_engine.dart';

final js = getJavascriptRuntime(xhr: false);
final result = js.evaluate('2 + 2');
print(result.stringResult); // 4

js.onMessage('bridge', (dynamic value) => 'pong');
js.evaluate('sendMessage("bridge", "ping")');
js.dispose();

Cobertura

QuickJS-NG 0.14.0 bundled with Flutter
One engine across Android, iOS, macOS, Linux, and Windows
Modern ES2020+ language features
Dart ↔ JavaScript message bridge
Optional fetch, XHR, and Promise helpers
flutter_js-compatible entry points
Native builds integrated with Flutter tooling
16 KB Android ELF page alignment

Cómo funciona

El paquete incluye QuickJS-NG 0.14.0 y hace pasar todas las plataformas nativas soportadas por el mismo motor y el mismo puente FFI. El pipeline de build de Flutter compila o empaqueta la biblioteca nativa; Dart se encarga de la evaluación, la mensajería y los helpers opcionales al estilo web.

Úsalo cuando

Un producto Flutter necesita evaluar JavaScript embebido con un comportamiento coherente entre plataformas.
Migras desde flutter_js y quieres sus puntos de entrada de siempre sobre un motor actual.
Necesitas una capa de scripting pequeña, un motor de expresiones, un validador o un reproductor SVG sin WebView.

Mapa de la API

getJavascriptRuntime: Crea el runtime QuickJS, coherente entre plataformas.
evaluate: Evalúa JavaScript e inspecciona el resultado.
onMessage: Expone callbacks de Dart con nombre a JavaScript.
enableFetch: Activa el comportamiento de fetch/XHR cuando la carga de trabajo lo requiere.
enableHandlePromises: Devuelve a Dart la finalización de las Promises.

Antes de publicar

Trata el código evaluado como una frontera de confianza deliberada y expón solo las capacidades del host que necesite.
Los tests unitarios en escritorio pueden requerir compilar la biblioteca nativa o apuntar a ella fuera del pipeline normal del plugin.

Contacto

¿Necesitas construir, modernizar o desbloquear un producto digital?

Cuéntame la restricción real: web, móvil, la entrega de tu equipo o un flujo de trabajo con IA que tiene que llegar a calidad de producción.

Hablemos de tu proyecto