Документация

Документация рантаймов, выросших из реальных пограничных случаев.

Три узкоспециализированных Flutter-пакета: полный SVG-рантайм, пайплайн шрифтов WOFF/WOFF2 и один современный JavaScript-движок для всех нативных платформ. Сначала проблема, потом минимальный рабочий пример.

01 · Flutter package

full_svg_flutter

Оставить SVG исходным форматом внутри Flutter.

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

Зачем он нужен

Статические иконки — лишь малая часть SVG. Продуктовые ассеты могут опираться на SMIL, CSS-анимацию, морфинг, фильтры, текст или встроенный JavaScript-плеер. Конвертация плодит второй источник истины, WebView — вторую систему рендеринга.

Установка

flutter pub add full_svg_flutter

Быстрый старт

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

Покрытие

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

Как устроен

Пакет разбирает SVG-документ в собственную модель с сохранением DOM, вычисляет стили и состояние анимации и рисует средствами Flutter. Статический и анимированный контент идут через один движок. JavaScript запускается лениво и только при наличии элемента script.

Когда использовать

Вы получаете анимированные SVG или экспорты SVGator и не можете поменять исходный формат.
Нужна точность фильтров, масок, текста или анимации, а не только статические иконки.
Нужен знакомый API в духе flutter_svg и путь миграции без WebView.

Карта API

FSvgPicture: Основной виджет для статических и анимированных ассетов из asset, сети, строки, файла или байтов.
SvgPicture: Статическая точка входа, совместимая с flutter_svg.
AnimatedSvgController: Запуск, пауза, перемотка, скорость, направление и переключение SVG-видов.
renderSvgToPicture: Запись SVG в Picture для кастомной отрисовки или растеризации.
svg.cache: Настраиваемый кэш декодированных исходников, общий для виджетов.

Знать до релиза

Это SVG-рантайм, а не полный DOM браузера: foreignObject и зависящие от браузера фреймворки вне области применения.
Сложные фильтры и текст со смешанным направлением письма проверяйте глазами до релиза.

02 · Flutter package

woff2

Загружать веб-шрифты через FontLoader во Flutter.

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

Зачем он нужен

FontLoader во Flutter принимает TTF/OTF, но не декодирует WOFF и WOFF2. Если передать сжатые байты напрямую, вместо глифов появятся пустые квадраты, а полезной ошибки не будет.

Установка

flutter pub add woff2

Быстрый старт

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

Покрытие

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

Как устроен

Декодер восстанавливает SFNT-байты из WOFF1/WOFF2 и регистрирует результат через FontLoader. CSS-парсер и реестр покрывают SVG, HTML, EPUB и другие пайплайны с правилами @font-face.

Когда использовать

В SVG, EPUB, HTML-экспорте или дизайн-ассете встроены шрифты WOFF/WOFF2.
Нужно загрузить шрифт, скачанный в рантайме или лежащий обычным asset.
Вы пишете рендерер, и вам нужно низкоуровневое преобразование WOFF → SFNT.

Карта API

loadWoffFontFromAsset: Декодировать и зарегистрировать WOFF/WOFF2 из assets одним вызовом.
loadWoffFontFromBytes: Зарегистрировать байты шрифта из сети, с диска или из памяти.
WoffFontRegistry: Пакетная регистрация семейств, начертаний и стилей.
extractFontFaceRules: Извлечь правила @font-face, включая data URL и значения в кавычках.
decodeFontIfWoff: Низкоуровневое определение контейнера и преобразование в SFNT.

Знать до релиза

Коллекции WOFF2 TTC в версии 0.1.0 не поддерживаются.
Во Flutter Web браузер уже умеет WOFF2; пакет нацелен на нативные платформы Flutter.

03 · Flutter package

quickjs_engine

Один и тот же современный JavaScript-движок на каждой платформе Flutter.

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

Зачем он нужен

Смесь JavaScriptCore и старого QuickJS ведёт себя по-разному на разных платформах — особенно в пограничных случаях с числами, Proxy, итераторами, промисами и анимационными рантаймами. Такие расхождения трудно воспроизвести и нельзя игнорировать.

Установка

flutter pub add quickjs_engine

Быстрый старт

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

Покрытие

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

Как устроен

Пакет включает QuickJS-NG 0.14.0 и проводит все поддерживаемые нативные платформы через один движок и один FFI-мост. Сборку или подключение нативной библиотеки берёт на себя пайплайн Flutter; на стороне Dart — выполнение кода, обмен сообщениями и необязательные веб-хелперы.

Когда использовать

Flutter-продукту нужен встроенный JavaScript с одинаковым поведением на всех платформах.
Вы мигрируете с flutter_js и хотите привычные точки входа на современном движке.
Нужен небольшой слой скриптов, вычислитель выражений, валидатор или SVG-плеер без WebView.

Карта API

getJavascriptRuntime: Создать единый для всех платформ рантайм QuickJS.
evaluate: Выполнить JavaScript и посмотреть результат.
onMessage: Открыть JavaScript именованные callback-и на стороне Dart.
enableFetch: Включить fetch/XHR, когда это нужно задаче.
enableHandlePromises: Прокинуть завершение промисов обратно в Dart.

Знать до релиза

Считайте выполняемый код осознанной границей доверия и открывайте ему только нужные возможности хоста.
Для unit-тестов на десктопе может понадобиться отдельно собрать нативную библиотеку или указать путь к ней.

Контакты

Нужно создать, модернизировать или сдвинуть с места цифровой продукт?

Расскажите о реальной задаче: веб, мобильное приложение, работа команды или ИИ-процесс, который пора довести до продакшена.

Обсудить проект