Docs

Documentation for the runtimes behind real edge cases.

Three focused Flutter packages: a full SVG runtime, a WOFF/WOFF2 font pipeline, and one modern JavaScript engine across native platforms. Start with the problem, then copy the smallest working example.

01 · Flutter package

full_svg_flutter

Keep SVG as the source format inside Flutter.

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

Why it exists

Static icons are only a small part of SVG. Product assets may rely on SMIL, CSS animation, morphing, filters, text, or an inline JavaScript player. Converting them adds a second source of truth; a WebView adds a second rendering system.

Install

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

Coverage

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

How it works

The package parses an SVG document into its own DOM-preserving model, evaluates style and animation state, then paints through Flutter. Static and animated content share the same engine. JavaScript starts lazily only when a script element is present.

Use it when

You receive animated SVG or SVGator assets and cannot change the source format.
You need filter, mask, text, or animation fidelity beyond static icon rendering.
You want a familiar flutter_svg-style API and a migration path without a WebView.

API map

FSvgPicture: Primary widget for static or animated assets from asset, network, string, file, or bytes.
SvgPicture: Static, flutter_svg-compatible entry point.
AnimatedSvgController: Play, pause, seek, change rate or direction, and switch SVG views.
renderSvgToPicture: Record an SVG into a Picture for custom painting or rasterization.
svg.cache: Configurable decoded-source cache shared across widgets.

Know before shipping

It is an SVG runtime, not a complete browser DOM; foreignObject and browser-dependent frameworks are outside scope.
Validate complex filter and mixed-direction text assets visually before release.

02 · Flutter package

woff2

Load web-font containers through Flutter's FontLoader.

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

Why it exists

Flutter accepts TTF/OTF through FontLoader but does not decode WOFF or WOFF2. Passing compressed web-font bytes directly can produce missing-glyph boxes without a useful error.

Install

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

Coverage

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

How it works

The decoder reconstructs SFNT bytes from WOFF1/WOFF2, then registers the result with FontLoader. A CSS parser and registry cover SVG, HTML, EPUB, and other content pipelines that carry @font-face rules.

Use it when

An SVG, EPUB, HTML export, or design asset embeds WOFF/WOFF2 fonts.
You need to load a font downloaded at runtime or stored as a regular asset.
You are building a renderer and need low-level WOFF bytes converted to SFNT.

API map

loadWoffFontFromAsset: Decode and register a bundled WOFF/WOFF2 asset in one call.
loadWoffFontFromBytes: Register font bytes fetched from network, disk, or memory.
WoffFontRegistry: Batch-register families, weights, and styles.
extractFontFaceRules: Extract @font-face rules, including data URLs and quoted values.
decodeFontIfWoff: Low-level container detection and conversion to SFNT bytes.

Know before shipping

WOFF2 TTC collections are not supported in 0.1.0.
Flutter Web already handles WOFF2 in the browser; the package targets native Flutter platforms.

03 · Flutter package

quickjs_engine

Run the same modern JavaScript engine on every Flutter platform.

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

Why it exists

A mixed JavaScriptCore/old-QuickJS setup can behave differently per platform, especially around numeric edge cases, Proxy, iteration, promises, or animation runtimes. That divergence is difficult to reproduce and harder to trust.

Install

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

Coverage

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

How it works

The package bundles QuickJS-NG 0.14.0 and routes every supported native platform through the same engine and FFI bridge. Flutter's build pipeline compiles or bundles the native library; Dart owns evaluation, messaging, and optional web-style helpers.

Use it when

A Flutter product needs embedded JavaScript evaluation with consistent cross-platform behavior.
You are migrating from flutter_js and want its familiar entry points on a current engine.
You need a small scripting layer, expression engine, validator, or SVG player without a WebView.

API map

getJavascriptRuntime: Create the platform-consistent QuickJS runtime.
evaluate: Evaluate JavaScript and inspect the result.
onMessage: Expose named Dart callbacks to JavaScript.
enableFetch: Opt into fetch/XHR behavior when the workload requires it.
enableHandlePromises: Bridge promise completion back into Dart.

Know before shipping

Treat evaluated code as a deliberate trust boundary and expose only the host capabilities it needs.
Desktop unit tests may require building or pointing to the native library outside the normal plugin pipeline.

Contact

Need to build, modernize, or unblock a digital product?

Bring the real constraint—web, mobile, team delivery, or an AI workflow that needs to become production-worthy.

Discuss a project