Docs

Documentazione dei runtime nati da casi limite reali.

Tre package Flutter mirati: un runtime SVG completo, una pipeline per font WOFF/WOFF2 e un unico motore JavaScript moderno per tutte le piattaforme native. Parti dal problema, poi copia l'esempio funzionante più piccolo.

01 · Flutter package

full_svg_flutter

Tieni l'SVG come formato sorgente dentro Flutter.

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

Perché esiste

Le icone statiche sono solo una piccola parte di SVG. Gli asset di prodotto possono dipendere da SMIL, animazioni CSS, morphing, filtri, testo o un player JavaScript inline. Convertirli aggiunge una seconda fonte di verità; una WebView aggiunge un secondo sistema di rendering.

Installazione

flutter pub add full_svg_flutter

Quick start

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');

Copertura

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

Come funziona

Il package analizza il documento SVG in un proprio modello che preserva il DOM, valuta lo stato di stile e animazione, poi disegna tramite Flutter. Contenuto statico e animato condividono lo stesso motore. JavaScript parte in modo lazy, solo quando è presente un elemento script.

Usalo quando

Ricevi asset SVG animati o SVGator e non puoi cambiare il formato sorgente.
Ti serve una fedeltà di filtri, maschere, testo o animazioni che vada oltre il rendering di icone statiche.
Vuoi un'API familiare in stile flutter_svg e un percorso di migrazione senza WebView.

Mappa dell'API

FSvgPicture: Widget principale per asset statici o animati da asset, rete, stringa, file o byte.
SvgPicture: Entry point statico, compatibile con flutter_svg.
AnimatedSvgController: Play, pausa, seek, cambio di velocità o direzione e passaggio tra view SVG.
renderSvgToPicture: Registra un SVG in una Picture per painting custom o rasterizzazione.
svg.cache: Cache configurabile delle sorgenti decodificate, condivisa tra i widget.

Da sapere prima del rilascio

È un runtime SVG, non un DOM browser completo: foreignObject e i framework che dipendono dal browser sono fuori scope.
Verifica visivamente gli asset con filtri complessi e testo a direzione mista prima del rilascio.

02 · Flutter package

woff2

Carica i container di web font attraverso il FontLoader di Flutter.

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

Perché esiste

Flutter accetta TTF/OTF tramite FontLoader ma non decodifica WOFF né WOFF2. Passare direttamente i byte compressi di un web font può produrre rettangoli di glifi mancanti senza un errore utile.

Installazione

flutter pub add woff2

Quick start

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());
}

Copertura

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

Come funziona

Il decoder ricostruisce i byte SFNT da WOFF1/WOFF2, poi registra il risultato con FontLoader. Un parser CSS e un registry coprono SVG, HTML, EPUB e altre pipeline di contenuti che portano regole @font-face.

Usalo quando

Un SVG, un EPUB, un export HTML o un asset di design incorpora font WOFF/WOFF2.
Devi caricare un font scaricato a runtime o salvato come asset normale.
Stai costruendo un renderer e ti servono byte WOFF di basso livello convertiti in SFNT.

Mappa dell'API

loadWoffFontFromAsset: Decodifica e registra un asset WOFF/WOFF2 incluso nell'app in una sola chiamata.
loadWoffFontFromBytes: Registra byte di font ottenuti da rete, disco o memoria.
WoffFontRegistry: Registra in batch famiglie, pesi e stili.
extractFontFaceRules: Estrae le regole @font-face, inclusi data URL e valori tra virgolette.
decodeFontIfWoff: Rilevamento del container a basso livello e conversione in byte SFNT.

Da sapere prima del rilascio

Le collezioni WOFF2 TTC non sono supportate nella 0.1.0.
Flutter Web gestisce già WOFF2 nel browser; il package è pensato per le piattaforme native di Flutter.

03 · Flutter package

quickjs_engine

Lo stesso motore JavaScript moderno su ogni piattaforma Flutter.

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

Perché esiste

Una configurazione mista JavaScriptCore/vecchio QuickJS può comportarsi in modo diverso su ogni piattaforma, soprattutto su casi limite numerici, Proxy, iterazione, promise o runtime di animazione. Quella divergenza è difficile da riprodurre e ancora più difficile da considerare affidabile.

Installazione

flutter pub add quickjs_engine

Quick start

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();

Copertura

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

Come funziona

Il package include QuickJS-NG 0.14.0 e fa passare ogni piattaforma nativa supportata dallo stesso motore e dallo stesso bridge FFI. La pipeline di build di Flutter compila o include la libreria nativa; Dart gestisce valutazione, messaggistica e gli helper opzionali in stile web.

Usalo quando

Un prodotto Flutter ha bisogno di valutare JavaScript embedded con un comportamento coerente tra piattaforme.
Stai migrando da flutter_js e vuoi i suoi entry point familiari su un motore aggiornato.
Ti serve un piccolo livello di scripting, un motore di espressioni, un validatore o un player SVG senza WebView.

Mappa dell'API

getJavascriptRuntime: Crea il runtime QuickJS coerente tra piattaforme.
evaluate: Valuta JavaScript e ispeziona il risultato.
onMessage: Espone a JavaScript callback Dart con nome.
enableFetch: Abilita il comportamento fetch/XHR quando il carico di lavoro lo richiede.
enableHandlePromises: Riporta in Dart il completamento delle promise.

Da sapere prima del rilascio

Tratta il codice valutato come un confine di fiducia esplicito ed esponi solo le capacità dell'host di cui ha davvero bisogno.
I test unitari su desktop possono richiedere di compilare la libreria nativa, o di puntare a essa, fuori dalla normale pipeline del plugin.

Contatti

Devi costruire, modernizzare o sbloccare un prodotto digitale?

Raccontami il vincolo reale – web, mobile, delivery del team o un workflow AI che deve diventare pronto per la produzione.

Parliamo del progetto