Docs

La documentation de runtimes nés de vrais cas limites.

Trois packages Flutter ciblés : un runtime SVG complet, un pipeline de polices WOFF/WOFF2 et un même moteur JavaScript moderne sur toutes les plateformes natives. Commencez par le problème, puis copiez le plus petit exemple qui fonctionne.

01 · Flutter package

full_svg_flutter

Garder le SVG comme format source dans Flutter.

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

Pourquoi il existe

Les icônes statiques ne sont qu'une petite partie du SVG. Les assets produit peuvent reposer sur SMIL, des animations CSS, du morphing, des filtres, du texte ou un lecteur JavaScript inline. Les convertir ajoute une seconde source de vérité ; un WebView ajoute un second système de rendu.

Installation

flutter pub add full_svg_flutter

Démarrage rapide

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

Couverture

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

Comment ça marche

Le package analyse un document SVG dans son propre modèle préservant le DOM, évalue les styles et l'état d'animation, puis dessine via Flutter. Contenu statique et contenu animé partagent le même moteur. JavaScript ne démarre que si un élément script est présent.

À utiliser quand

Vous recevez des SVG animés ou des assets SVGator et ne pouvez pas changer le format source.
Vous avez besoin d'une fidélité des filtres, masques, textes ou animations qui dépasse le rendu d'icônes statiques.
Vous voulez une API familière, dans l'esprit de flutter_svg, et un chemin de migration sans WebView.

Carte de l'API

FSvgPicture: Widget principal pour les assets statiques ou animés depuis un asset, le réseau, une chaîne, un fichier ou des bytes.
SvgPicture: Point d'entrée statique compatible avec flutter_svg.
AnimatedSvgController: Lecture, pause, seek, changement de vitesse ou de direction, et bascule entre vues SVG.
renderSvgToPicture: Enregistrement d'un SVG dans un Picture pour un painting personnalisé ou une rastérisation.
svg.cache: Cache configurable des sources décodées, partagé entre les widgets.

À savoir avant la mise en production

C'est un runtime SVG, pas un DOM de navigateur complet ; foreignObject et les frameworks dépendants du navigateur sont hors périmètre.
Validez visuellement les filtres complexes et les textes à direction mixte avant la mise en production.

02 · Flutter package

woff2

Charger des conteneurs de polices web via le FontLoader de Flutter.

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

Pourquoi il existe

Flutter accepte le TTF/OTF via FontLoader mais ne décode ni WOFF ni WOFF2. Lui passer directement des bytes de police web compressés produit des glyphes vides, sans erreur exploitable.

Installation

flutter pub add woff2

Démarrage rapide

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

Couverture

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

Comment ça marche

Le décodeur reconstruit les bytes SFNT à partir du WOFF1/WOFF2, puis enregistre le résultat auprès de FontLoader. Un parseur CSS et un registre couvrent les pipelines SVG, HTML, EPUB et autres contenus qui transportent des règles @font-face.

À utiliser quand

Un SVG, un EPUB, un export HTML ou un asset de design embarque des polices WOFF/WOFF2.
Vous devez charger une police téléchargée à l'exécution ou stockée comme un asset ordinaire.
Vous construisez un moteur de rendu et avez besoin de convertir des bytes WOFF en SFNT à bas niveau.

Carte de l'API

loadWoffFontFromAsset: Décoder et enregistrer un asset WOFF/WOFF2 embarqué en un seul appel.
loadWoffFontFromBytes: Enregistrer des bytes de police venant du réseau, du disque ou de la mémoire.
WoffFontRegistry: Enregistrer en lot des familles, des graisses et des styles.
extractFontFaceRules: Extraire les règles @font-face, y compris les data URL et les valeurs entre guillemets.
decodeFontIfWoff: Détection bas niveau du conteneur et conversion en bytes SFNT.

À savoir avant la mise en production

Les collections WOFF2 TTC ne sont pas prises en charge en 0.1.0.
Flutter Web gère déjà le WOFF2 dans le navigateur ; le package vise les plateformes Flutter natives.

03 · Flutter package

quickjs_engine

Le même moteur JavaScript moderne sur chaque plateforme Flutter.

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

Pourquoi il existe

Un mélange de JavaScriptCore et d'un vieux QuickJS peut se comporter différemment selon la plateforme, surtout sur les cas limites numériques, Proxy, l'itération, les promesses ou les runtimes d'animation. Ces divergences sont difficiles à reproduire et encore plus difficiles à assumer.

Installation

flutter pub add quickjs_engine

Démarrage rapide

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

Couverture

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

Comment ça marche

Le package embarque QuickJS-NG 0.14.0 et fait passer chaque plateforme native prise en charge par le même moteur et le même pont FFI. Le pipeline de build de Flutter compile ou embarque la bibliothèque native ; Dart se charge de l'évaluation, de la messagerie et des helpers web optionnels.

À utiliser quand

Un produit Flutter a besoin d'évaluer du JavaScript embarqué avec un comportement cohérent sur toutes les plateformes.
Vous migrez depuis flutter_js et voulez retrouver ses points d'entrée familiers sur un moteur à jour.
Vous avez besoin d'une petite couche de scripting, d'un moteur d'expressions, d'un validateur ou d'un lecteur SVG sans WebView.

Carte de l'API

getJavascriptRuntime: Créer le runtime QuickJS cohérent sur toutes les plateformes.
evaluate: Évaluer du JavaScript et inspecter le résultat.
onMessage: Exposer des callbacks Dart nommés à JavaScript.
enableFetch: Activer fetch/XHR quand la charge de travail l'exige.
enableHandlePromises: Ramener la résolution des promesses vers Dart.

À savoir avant la mise en production

Traitez le code évalué comme une frontière de confiance délibérée et n'exposez que les capacités hôtes dont il a besoin.
Les tests unitaires desktop peuvent exiger de compiler ou de référencer la bibliothèque native en dehors du pipeline de plugin habituel.

Contact

Un produit numérique à construire, moderniser ou débloquer ?

Décrivez le vrai problème – web, mobile, organisation de l'équipe ou workflow IA qui doit devenir fiable en production.

Parler d'un projet