Docs

Dokumentation für Runtimes, die aus echten Grenzfällen entstanden sind.

Drei fokussierte Flutter-Pakete: eine vollständige SVG-Runtime, eine WOFF/WOFF2-Font-Pipeline und eine moderne JavaScript-Engine für alle nativen Plattformen. Erst das Problem, dann das kleinste lauffähige Beispiel.

01 · Flutter package

full_svg_flutter

SVG als Quellformat in Flutter behalten.

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

Warum es das gibt

Statische Icons sind nur ein kleiner Teil von SVG. Produkt-Assets nutzen oft SMIL, CSS-Animation, Morphing, Filter, Text oder einen eingebetteten JavaScript-Player. Konvertierung schafft eine zweite Quelle der Wahrheit, ein WebView ein zweites Rendering-System.

Installation

flutter pub add full_svg_flutter

Schnellstart

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

Abdeckung

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

So funktioniert es

Das Paket parst ein SVG-Dokument in ein eigenes DOM-erhaltendes Modell, wertet Style- und Animationszustand aus und zeichnet über Flutter. Statischer und animierter Inhalt laufen durch dieselbe Engine. JavaScript startet erst, wenn tatsächlich ein script-Element vorhanden ist.

Einsetzen, wenn

Sie bekommen animierte SVG- oder SVGator-Assets und können das Quellformat nicht ändern.
Sie brauchen Filter-, Masken-, Text- oder Animationstreue jenseits statischer Icons.
Sie wollen ein vertrautes API im Stil von flutter_svg und einen Migrationspfad ohne WebView.

API-Übersicht

FSvgPicture: Primäres Widget für statische oder animierte Assets aus Asset, Netzwerk, String, Datei oder Bytes.
SvgPicture: Statischer, flutter_svg-kompatibler Einstiegspunkt.
AnimatedSvgController: Abspielen, pausieren, springen, Geschwindigkeit und Richtung ändern, SVG-Views wechseln.
renderSvgToPicture: Ein SVG in ein Picture zeichnen – für eigenes Painting oder Rasterisierung.
svg.cache: Konfigurierbarer Cache für dekodierte Quellen, geteilt über alle Widgets.

Vor dem Release wissen

Es ist eine SVG-Runtime, kein vollständiges Browser-DOM; foreignObject und browserabhängige Frameworks liegen außerhalb des Scopes.
Komplexe Filter und Text mit gemischter Schreibrichtung vor dem Release visuell prüfen.

02 · Flutter package

woff2

Webfont-Container über Flutters FontLoader laden.

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

Warum es das gibt

Flutter nimmt TTF/OTF über FontLoader an, dekodiert aber weder WOFF noch WOFF2. Wer komprimierte Webfont-Bytes direkt übergibt, bekommt leere Glyphenkästen – ohne brauchbare Fehlermeldung.

Installation

flutter pub add woff2

Schnellstart

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

Abdeckung

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

So funktioniert es

Der Decoder rekonstruiert SFNT-Bytes aus WOFF1/WOFF2 und registriert das Ergebnis über FontLoader. Ein CSS-Parser und eine Registry decken SVG-, HTML-, EPUB- und andere Content-Pipelines mit @font-face-Regeln ab.

Einsetzen, wenn

Ein SVG, EPUB, HTML-Export oder Design-Asset bettet WOFF/WOFF2-Schriften ein.
Eine Schrift wird zur Laufzeit heruntergeladen oder liegt als normales Asset vor.
Sie bauen einen Renderer und brauchen die Low-Level-Konvertierung von WOFF-Bytes nach SFNT.

API-Übersicht

loadWoffFontFromAsset: Ein gebündeltes WOFF/WOFF2-Asset in einem Aufruf dekodieren und registrieren.
loadWoffFontFromBytes: Font-Bytes aus Netzwerk, Datei oder Speicher registrieren.
WoffFontRegistry: Familien, Schnitte und Stile gesammelt registrieren.
extractFontFaceRules: @font-face-Regeln extrahieren, inklusive Data-URLs und Werten in Anführungszeichen.
decodeFontIfWoff: Low-Level-Erkennung des Containers und Konvertierung nach SFNT.

Vor dem Release wissen

WOFF2-TTC-Sammlungen werden in 0.1.0 nicht unterstützt.
Flutter Web überlässt WOFF2 dem Browser; das Paket zielt auf die nativen Flutter-Plattformen.

03 · Flutter package

quickjs_engine

Dieselbe moderne JavaScript-Engine auf jeder Flutter-Plattform.

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

Warum es das gibt

Eine Mischung aus JavaScriptCore und altem QuickJS verhält sich je nach Plattform unterschiedlich – besonders bei numerischen Grenzfällen, Proxy, Iteration, Promises oder Animations-Runtimes. Solche Abweichungen sind schwer zu reproduzieren und noch schwerer zu vertrauen.

Installation

flutter pub add quickjs_engine

Schnellstart

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

Abdeckung

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

So funktioniert es

Das Paket bündelt QuickJS-NG 0.14.0 und führt jede unterstützte native Plattform über dieselbe Engine und dieselbe FFI-Bridge. Flutters Build-Pipeline kompiliert oder bündelt die native Bibliothek; Dart übernimmt Auswertung, Messaging und optionale Web-Helfer.

Einsetzen, wenn

Ein Flutter-Produkt braucht eingebettetes JavaScript mit konsistentem Verhalten über alle Plattformen.
Sie migrieren von flutter_js und wollen dessen vertraute Einstiegspunkte auf einer aktuellen Engine.
Sie brauchen eine kleine Scripting-Schicht, eine Expression-Engine, einen Validator oder einen SVG-Player ohne WebView.

API-Übersicht

getJavascriptRuntime: Die plattformübergreifend konsistente QuickJS-Runtime erzeugen.
evaluate: JavaScript auswerten und das Ergebnis inspizieren.
onMessage: Benannte Dart-Callbacks für JavaScript bereitstellen.
enableFetch: fetch/XHR-Verhalten aktivieren, wenn die Aufgabe es verlangt.
enableHandlePromises: Promise-Auflösung zurück nach Dart bringen.

Vor dem Release wissen

Ausgeführten Code als bewusste Vertrauensgrenze behandeln und nur die Host-Fähigkeiten freigeben, die er braucht.
Desktop-Unit-Tests können erfordern, die native Bibliothek außerhalb der normalen Plugin-Pipeline zu bauen oder zu referenzieren.

Kontakt

Ein digitales Produkt bauen, modernisieren oder wieder in Bewegung bringen?

Beschreiben Sie das eigentliche Problem – Web, Mobile, die Auslieferung im Team oder ein KI-Workflow, der produktionsreif werden muss.

Projekt besprechen