Docs

Documentação dos runtimes por trás de edge cases reais.

Três pacotes Flutter focados: um runtime SVG completo, um pipeline de fontes WOFF/WOFF2 e um único motor JavaScript moderno para todas as plataformas nativas. Comece pelo problema, depois copie o menor exemplo que funciona.

01 · Flutter package

full_svg_flutter

Mantenha o SVG como formato de origem dentro do Flutter.

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

Por que existe

Ícones estáticos são só uma pequena parte do SVG. Assets de produto podem depender de SMIL, animação CSS, morphing, filtros, texto ou de um player JavaScript inline. Converter cria uma segunda fonte da verdade; uma WebView adiciona um segundo sistema de renderização.

Instalação

flutter pub add full_svg_flutter

Início 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

Como funciona

O pacote faz o parsing do documento SVG em um modelo próprio que preserva o DOM, avalia o estado de estilo e animação e então pinta pelo Flutter. Conteúdo estático e animado compartilham o mesmo motor. O JavaScript só inicia, sob demanda, quando existe um elemento script.

Use quando

Você recebe SVGs animados ou assets do SVGator e não pode mudar o formato de origem.
Você precisa de fidelidade em filtros, máscaras, texto ou animação além da renderização de ícones estáticos.
Você quer uma API familiar no estilo do flutter_svg e um caminho de migração sem WebView.

Mapa da API

FSvgPicture: Widget principal para assets estáticos ou animados a partir de asset, rede, string, arquivo ou bytes.
SvgPicture: Ponto de entrada estático, compatível com o flutter_svg.
AnimatedSvgController: Reproduz, pausa, faz seek, muda velocidade ou direção e alterna views do SVG.
renderSvgToPicture: Grava um SVG em um Picture para pintura customizada ou rasterização.
svg.cache: Cache configurável de documentos decodificados, compartilhado entre widgets.

Saiba antes de publicar

É um runtime SVG, não um DOM de navegador completo; foreignObject e frameworks que dependem do navegador estão fora do escopo.
Valide visualmente assets com filtros complexos e texto em direções mistas antes da release.

02 · Flutter package

woff2

Carregue contêineres de web fonts pelo FontLoader do Flutter.

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

Por que existe

O Flutter aceita TTF/OTF pelo FontLoader, mas não decodifica WOFF nem WOFF2. Passar os bytes comprimidos de uma web font diretamente pode gerar caixas de glifos ausentes, sem nenhum erro útil.

Instalação

flutter pub add woff2

Início 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

Como funciona

O decoder reconstrói os bytes SFNT a partir de WOFF1/WOFF2 e registra o resultado no FontLoader. Um parser de CSS e um registry cobrem pipelines de conteúdo de SVG, HTML, EPUB e outros que carregam regras @font-face.

Use quando

Um SVG, EPUB, exportação HTML ou asset de design embute fontes WOFF/WOFF2.
Você precisa carregar uma fonte baixada em runtime ou guardada como um asset comum.
Você está construindo um renderizador e precisa converter bytes WOFF de baixo nível em SFNT.

Mapa da API

loadWoffFontFromAsset: Decodifica e registra um asset WOFF/WOFF2 empacotado em uma única chamada.
loadWoffFontFromBytes: Registra bytes de fonte obtidos da rede, do disco ou da memória.
WoffFontRegistry: Registra famílias, pesos e estilos em lote.
extractFontFaceRules: Extrai regras @font-face, incluindo data URLs e valores entre aspas.
decodeFontIfWoff: Detecção de contêiner de baixo nível e conversão para bytes SFNT.

Saiba antes de publicar

Coleções WOFF2 TTC não são suportadas na 0.1.0.
O Flutter Web já trata WOFF2 no navegador; o pacote é voltado às plataformas nativas do Flutter.

03 · Flutter package

quickjs_engine

Rode o mesmo motor JavaScript moderno em todas as plataformas Flutter.

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

Por que existe

Uma configuração mista de JavaScriptCore com um QuickJS antigo pode se comportar de forma diferente em cada plataforma, principalmente em edge cases numéricos, Proxy, iteração, promises ou runtimes de animação. É difícil reproduzir essa divergência, e mais difícil ainda confiar nela.

Instalação

flutter pub add quickjs_engine

Início 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

Como funciona

O pacote embarca o QuickJS-NG 0.14.0 e faz todas as plataformas nativas suportadas passarem pelo mesmo motor e pela mesma ponte FFI. O pipeline de build do Flutter compila ou empacota a biblioteca nativa; o Dart cuida da avaliação, das mensagens e dos helpers opcionais no estilo web.

Use quando

Um produto Flutter precisa avaliar JavaScript embutido com comportamento consistente entre plataformas.
Você está migrando do flutter_js e quer os mesmos pontos de entrada familiares em um motor atual.
Você precisa de uma pequena camada de scripting, um motor de expressões, um validador ou um player SVG sem WebView.

Mapa da API

getJavascriptRuntime: Cria o runtime QuickJS consistente entre plataformas.
evaluate: Avalia JavaScript e inspeciona o resultado.
onMessage: Expõe callbacks Dart nomeados ao JavaScript.
enableFetch: Habilita o comportamento de fetch/XHR quando a carga de trabalho exige.
enableHandlePromises: Traz a conclusão das promises de volta para o Dart.

Saiba antes de publicar

Trate o código avaliado como uma fronteira de confiança deliberada e exponha apenas as capacidades do host de que ele realmente precisa.
Testes unitários em desktop podem exigir compilar a biblioteca nativa ou apontar para ela fora do pipeline normal do plugin.

Contato

Precisa construir, modernizar ou destravar um produto digital?

Traga a restrição real – web, mobile, entrega do time ou um fluxo de trabalho com IA que precisa ficar pronto para produção.

Conversar sobre um projeto