დოკუმენტაცია

რეალური ზღვრული შემთხვევებიდან დაბადებული runtime-ების დოკუმენტაცია.

სამი ფოკუსირებული Flutter-პაკეტი: სრული SVG runtime, WOFF/WOFF2 შრიფტების ჩატვირთვის მექანიზმი და ერთი თანამედროვე JavaScript-ძრავი ყველა ნატიური პლატფორმისთვის. დაიწყეთ პრობლემით და შემდეგ დააკოპირეთ უმცირესი მომუშავე მაგალითი.

01 · Flutter package

full_svg_flutter

შეინარჩუნეთ SVG საწყის ფორმატად Flutter-ის შიგნით.

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

რატომ არსებობს

სტატიკური ხატულები SVG-ის მხოლოდ მცირე ნაწილია. პროდუქტის ასეტები შეიძლება SMIL-ს, CSS-ანიმაციას, path morphing-ს, ფილტრებს, ტექსტს ან ჩაშენებულ 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-ის ასეტებს და საწყისი ფორმატის შეცვლა არ შეგიძლიათ.
გჭირდებათ ფილტრების, მასკების, ტექსტის ან ანიმაციის სიზუსტე, რომელიც სტატიკური ხატულების რენდერინგს სცდება.
გსურთ flutter_svg-ის სტილის ნაცნობი API და მიგრაციის გზა WebView-ს გარეშე.

API-ს რუკა

FSvgPicture: მთავარი ვიჯეტი სტატიკური ან ანიმირებული ასეტისთვის — asset-იდან, ქსელიდან, სტრიქონიდან, ფაილიდან ან ბაიტებიდან.
SvgPicture: სტატიკური, flutter_svg-თან თავსებადი შესასვლელი წერტილი.
AnimatedSvgController: დაკვრა, პაუზა, გადახვევა, სიჩქარისა და მიმართულების შეცვლა და SVG-ის ხედებს შორის გადართვა.
renderSvgToPicture: SVG-ის Picture-ში ჩაწერა საკუთარი ხატვისთვის ან რასტერიზაციისთვის.
svg.cache: ვიჯეტებს შორის გაზიარებული, კონფიგურირებადი ქეში დეკოდირებული წყაროებისთვის.

გაითვალისწინეთ რელიზამდე

ეს SVG runtime-ია და არა სრული ბრაუზერის DOM; foreignObject და ბრაუზერზე დამოკიდებული ფრეიმვორკები მის ფარგლებს გარეთაა.
რთული ფილტრებისა და შერეული მიმართულების ტექსტის მქონე ასეტები რელიზამდე ვიზუალურად შეამოწმეთ.

02 · Flutter package

woff2

ჩატვირთეთ ვებშრიფტების კონტეინერები Flutter-ის FontLoader-ით.

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

რატომ არსებობს

Flutter FontLoader-ის მეშვეობით 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

როგორ მუშაობს

დეკოდერი WOFF1/WOFF2-დან SFNT-ბაიტებს აღადგენს და შედეგს FontLoader-ში არეგისტრირებს. CSS-პარსერი და რეესტრი ფარავს SVG-ს, HTML-ს, EPUB-სა და კონტენტის სხვა ნაკადებს, რომლებიც @font-face წესებს შეიცავს.

გამოიყენეთ, როცა

SVG, EPUB, HTML-ექსპორტი ან დიზაინის ასეტი WOFF/WOFF2 შრიფტებს შეიცავს.
გჭირდებათ შრიფტის ჩატვირთვა, რომელიც აპლიკაციის მუშაობისას ჩამოიტვირთა ან ჩვეულებრივ ასეტად ინახება.
რენდერერს აშენებთ და დაბალ დონეზე WOFF-ბაიტების SFNT-ში გადაყვანა გჭირდებათ.

API-ს რუკა

loadWoffFontFromAsset: პაკეტში ჩადებული WOFF/WOFF2 ასეტის დეკოდირება და რეგისტრაცია ერთი გამოძახებით.
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-ში, იტერაციაში, Promise-ებსა და ანიმაციის runtime-ებში. ასეთი განსხვავებების გამეორება რთულია, ნდობა კი — კიდევ უფრო.

ინსტალაცია

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-ის build-პროცესი აკომპილირებს ან პაკეტში დებს; შესრულება, შეტყობინებების გაცვლა და არასავალდებულო ვებსტილის დამხმარეები Dart-ის მხარესაა.

გამოიყენეთ, როცა

Flutter-პროდუქტს ჩაშენებული JavaScript-ის შესრულება სჭირდება პლატფორმებს შორის ერთგვაროვანი ქცევით.
flutter_js-იდან მიგრირებთ და მის ნაცნობ შესასვლელ წერტილებს თანამედროვე ძრავზე გსურთ.
გჭირდებათ მცირე სკრიპტული ფენა, გამოსახულებების ძრავი, ვალიდატორი ან SVG-ფლეერი WebView-ს გარეშე.

API-ს რუკა

getJavascriptRuntime: პლატფორმებს შორის ერთგვაროვანი QuickJS runtime-ის შექმნა.
evaluate: JavaScript-ის შესრულება და შედეგის დათვალიერება.
onMessage: სახელდებული Dart-ფუნქციების (callback) გახსნა JavaScript-ისთვის.
enableFetch: fetch/XHR ქცევის ჩართვა, როცა ამოცანა ამას მოითხოვს.
enableHandlePromises: Promise-ის დასრულების Dart-ში დაბრუნება.

გაითვალისწინეთ რელიზამდე

შესრულებულ კოდს განზრახ დადგენილ ნდობის საზღვრად მოეპყარით და მას მხოლოდ ის ჰოსტის შესაძლებლობები გაუხსენით, რომლებიც ნამდვილად სჭირდება.
დესკტოპზე unit tests-ს შეიძლება ნატიური ბიბლიოთეკის აწყობა ან მასზე მითითება დასჭირდეს ჩვეულებრივი plugin-ის build-პროცესის გარეთ.

კონტაქტი

გჭირდებათ ციფრული პროდუქტის შექმნა, მოდერნიზაცია ან ჩიხიდან გამოყვანა?

მოგვიყევით რეალურ პრობლემაზე — ვები, მობილური, გუნდის მიწოდება თუ AI სამუშაო პროცესი, რომელიც პროდაქშენისთვის ვარგისი უნდა გახდეს.

პროექტის განხილვა