Čo viete o vnútornej štruktúre Flutteru?

Jadro Flutteru sa skladá z motora, rámca a widgetov.

• Motor Flutter: Napísaný v C++ a poskytuje nízkoúrovňové API pre vykresľovanie, prácu s textom, tokmi a doplnkami. Priamo komunikuje s platformou (iOS, Android, Web, Desktop) a grafickými API (napríklad Skia). Motor riadi vykresľovanie, asynchrónne operácie a životný cyklus aplikácie.

• Rámec Flutter (Framework): Napísaný v Dart a poskytuje vrstvu abstrakcie nad motorom. Obsahuje množstvo hotových komponentov:

  • Foundation: Základné triedy a pomocné funkcie.
  • Rendering: Vrstva pre správu stromu renderovacích objektov a ich kreslenie.
  • Widgets: Hlavné stavebné bloky UI, ktoré tvoria strom widgetov.
  • Material Design a Cupertino: Sady widgetov implementujúcich štýly Material Design a dizajn v štýle iOS.

• Widgety: V Flutter je všetko widget. Opisujú konfiguráciu UI. Existujú dva hlavné typy:

  • StatelessWidget: Widget bez vnútorného meniteľného stavu. Jeho UI závisí iba od jeho vstupných parametrov (properties).
  • StatefulWidget: Widget, ktorý môže mať meniteľný stav. Skladá sa z widgetu a objektu State, v ktorom sa uchováva stav a logika pre tvorbu UI (build metóda).

Proces renderovania:

1. Build: Framework volá metódu build() widgetu, ktorá vracia strom iných widgetov.
2. Element Tree: Na základe stromu widgetov sa vytvorí strom elementov (Element Tree), ktorý predstavuje štruktúru UI. Elementy spájajú widgety s príslušnými objektmi renderovania.
3. Render Object Tree: Elementy vytvárajú a spravujú strom renderovacích objektov (Render Object Tree). Objekt renderovania je zodpovedný za rozloženie, farbenie a hit testing.
4. Painting: Motor používa Skia (na mobiloch a desktopoch) alebo CanvasKit (na webe) na kreslenie Render Objectov na obrazovku.

Reaktívne programovanie:

Flutter používa reaktívny prístup k tvorbe UI. Pri zmene stavu aplikácie framework prebuduje tú časť stromu widgetov, ktorá závisí od tohto stavu. To sa deje automaticky a efektívne vďaka mechanizmu diffing a rýchlemu vytváraniu a ničenie widgetov.

Hot Reload a Hot Restart:

• Hot Reload: Vkladá aktualizovaný Dart kód do bežiacej aplikácie bez straty stavu. Ideálne pre rýchlu iteráciu UI.
• Hot Restart: Reštartuje aplikáciu od začiatku s aktualizovaným kódom a resetovaným stavom. Používa sa, keď Hot Reload nefunguje, napríklad pri zmenách v initState alebo globálnych premenných.

Kód špecifický pre platformu:

Flutter umožňuje komunikáciu s natívnymi API platformy cez platformové kanály (Platform Channels). To umožňuje volať metódy natívneho kódu (Java/Kotlin na Android, Swift/Objective-C na iOS) a získavať výsledky späť do Dart.

// Príklad použitia platformového kanála
import 'package:flutter/services.dart';

static const platform = MethodChannel('samples.flutter.dev/battery');

Future<void> getBatteryLevel() async {
  String batteryLevel;
  try {
    final int result = await platform.invokeMethod('getBatteryLevel');
    batteryLevel = 'Úroveň batérie: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Nepodarilo sa získať úroveň nabíjania: '${e.message}'.";
  }
  // Aktualizácia UI
}