Dokumentacja

Dokumentacja runtime'ów, które powstały z prawdziwych przypadków brzegowych.

Trzy wyspecjalizowane pakiety Flutter: pełny runtime SVG, pipeline fontów WOFF/WOFF2 i jeden nowoczesny silnik JavaScript na wszystkich platformach natywnych. Zacznij od problemu, potem skopiuj najmniejszy działający przykład.

01 · Flutter package

full_svg_flutter

Zachowaj SVG jako format źródłowy we Flutterze.

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

Po co powstał

Statyczne ikony to tylko mały wycinek SVG. Assety produktowe mogą opierać się na SMIL, animacjach CSS, morphingu, filtrach, tekście albo wbudowanym odtwarzaczu w JavaScripcie. Konwersja dokłada drugie źródło prawdy, a WebView – drugi system renderowania.

Instalacja

flutter pub add full_svg_flutter

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

Zakres

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

Jak działa

Pakiet parsuje dokument SVG do własnego modelu zachowującego DOM, wylicza style i stan animacji, a potem rysuje przez Flutter. Treść statyczna i animowana korzysta z tego samego silnika. JavaScript startuje leniwie i tylko wtedy, gdy w dokumencie jest element script.

Użyj, gdy

Dostajesz animowane SVG albo assety z SVGator i nie możesz zmienić formatu źródłowego.
Potrzebujesz wierności filtrów, masek, tekstu lub animacji wykraczającej poza statyczne ikony.
Chcesz znajomego API w stylu flutter_svg i ścieżki migracji bez WebView.

Mapa API

FSvgPicture: Główny widget dla statycznych i animowanych assetów ładowanych z assetów, sieci, stringa, pliku lub bajtów.
SvgPicture: Statyczny punkt wejścia zgodny z flutter_svg.
AnimatedSvgController: Odtwarzanie, pauza, seek, zmiana tempa lub kierunku i przełączanie widoków SVG.
renderSvgToPicture: Zapis SVG do Picture na potrzeby własnego rysowania lub rasteryzacji.
svg.cache: Konfigurowalny cache zdekodowanych źródeł, współdzielony między widgetami.

Zanim wydasz

To runtime SVG, nie pełny DOM przeglądarki – foreignObject i frameworki zależne od przeglądarki są poza zakresem.
Złożone filtry i tekst o mieszanym kierunku sprawdź wizualnie przed wydaniem.

02 · Flutter package

woff2

Ładuj kontenery fontów webowych przez FontLoader Fluttera.

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

Po co powstał

Flutter przyjmuje TTF/OTF przez FontLoader, ale nie dekoduje WOFF ani WOFF2. Podanie skompresowanych bajtów fontu webowego wprost może skończyć się pustymi prostokątami zamiast glifów – bez żadnego sensownego błędu.

Instalacja

flutter pub add woff2

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

Zakres

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

Jak działa

Dekoder odtwarza bajty SFNT z WOFF1/WOFF2, a wynik rejestruje w FontLoaderze. Parser CSS i rejestr obsługują SVG, HTML, EPUB i inne pipeline'y treści, które niosą reguły @font-face.

Użyj, gdy

SVG, EPUB, eksport HTML albo asset projektowy ma osadzone fonty WOFF/WOFF2.
Musisz załadować font pobrany w czasie działania aplikacji albo trzymany jako zwykły asset.
Budujesz renderer i potrzebujesz niskopoziomowej konwersji bajtów WOFF do SFNT.

Mapa API

loadWoffFontFromAsset: Dekoduje i rejestruje dołączony asset WOFF/WOFF2 jednym wywołaniem.
loadWoffFontFromBytes: Rejestruje bajty fontu pobrane z sieci, dysku lub pamięci.
WoffFontRegistry: Rejestruje hurtowo rodziny, grubości i style.
extractFontFaceRules: Wyciąga reguły @font-face, w tym data URL i wartości w cudzysłowach.
decodeFontIfWoff: Niskopoziomowe wykrywanie kontenera i konwersja do bajtów SFNT.

Zanim wydasz

Kolekcje WOFF2 TTC nie są wspierane w wersji 0.1.0.
Flutter Web obsługuje WOFF2 już w przeglądarce; pakiet celuje w natywne platformy Flutter.

03 · Flutter package

quickjs_engine

Ten sam nowoczesny silnik JavaScript na każdej platformie Flutter.

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

Po co powstał

Mieszanka JavaScriptCore i starego QuickJS może zachowywać się inaczej na każdej platformie – zwłaszcza przy numerycznych przypadkach brzegowych, Proxy, iteracji, Promise czy runtime'ach animacji. Takie rozjazdy trudno odtworzyć, a jeszcze trudniej im zaufać.

Instalacja

flutter pub add quickjs_engine

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

Zakres

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

Jak działa

Pakiet dołącza QuickJS-NG 0.14.0 i kieruje każdą wspieraną platformę natywną przez ten sam silnik i most FFI. Pipeline buildu Fluttera kompiluje lub dołącza bibliotekę natywną; po stronie Darta jest ewaluacja, wymiana wiadomości i opcjonalne helpery w stylu webowym.

Użyj, gdy

Produkt Flutter potrzebuje osadzonej ewaluacji JavaScriptu o spójnym zachowaniu na wszystkich platformach.
Migrujesz z flutter_js i chcesz zachować znajome punkty wejścia na aktualnym silniku.
Potrzebujesz małej warstwy skryptowej, silnika wyrażeń, walidatora albo odtwarzacza SVG bez WebView.

Mapa API

getJavascriptRuntime: Tworzy runtime QuickJS spójny między platformami.
evaluate: Wykonuje JavaScript i pozwala sprawdzić wynik.
onMessage: Udostępnia nazwane callbacki Darta w JavaScripcie.
enableFetch: Włącza fetch/XHR, gdy wymaga tego obciążenie.
enableHandlePromises: Przekazuje zakończenie Promise z powrotem do Darta.

Zanim wydasz

Traktuj wykonywany kod jako świadomą granicę zaufania i udostępniaj mu tylko te możliwości hosta, których naprawdę potrzebuje.
Testy jednostkowe na desktopie mogą wymagać zbudowania biblioteki natywnej albo wskazania jej poza zwykłym pipeline'em pluginu.

Kontakt

Chcesz zbudować, zmodernizować albo odblokować produkt cyfrowy?

Przyjdź z prawdziwym problemem – web, mobile, delivery zespołu albo workflow AI, który ma dojrzeć do produkcji.

Porozmawiajmy o projekcie