Šta znate o unutrašnjoj strukturi Flutter-a?

Jezgro Flutter sastoji se od motora, okvira i vidžeta.

• Motor Flutter: Napisano je na C++ i pruža niskorazinski API za renderovanje, rad sa tekstom, tokove i dodatke. Direktno komunicira sa platformom (iOS, Android, Web, Desktop) i grafičkim API-jima (npr. Skia). Motor upravlja renderovanjem, asinhronim operacijama i životnim ciklusom aplikacije.

• Okvir Flutter (Framework): Napisano je na Dart-u i pruža sloj apstrakcije iznad motora. Uključuje mnoge gotove komponente:

  • Foundation: Osnovne klase i pomoćne funkcije.
  • Rendering: Sloj za upravljanje drvetom objekata za renderovanje i njihovim crtanjem.
  • Widgets: Glavni građevni blokovi UI-ja, koji formiraju drvo vidžeta.
  • Material Design i Cupertino: Setovi vidžeta koji implementiraju stilove Material Design i dizajn u stilu iOS.

• Vidžeti: U Flutter-u, sve je vidžet. Opisuju konfiguraciju UI-ja. Postoje dve osnovne vrste:

  • StatelessWidget: Vidžet bez unutrašnjeg promenljivog stanja. Njegov UI zavisi samo od ulaznih parametara (properties).
  • StatefulWidget: Vidžet koji može imati promenljivo stanje. Sastoji se od samog vidžeta i objekta State, u kojem se čuva stanje i logika za građu UI-ja (build metoda).

Proces renderovanja:

1. Build: Framework poziva metodu build() vidžeta, koja vraća drvo drugih vidžeta.
2. Element Tree: Na osnovu drveta vidžeta, kreira se drvo elemenata (Element Tree), koje predstavlja strukturu UI-ja. Elementi povezuju vidžete sa odgovarajućim objektima za renderovanje.
3. Render Object Tree: Elementi kreiraju i upravljaju drvetom objekata za renderovanje (Render Object Tree). Objekti za renderovanje su odgovorni za raspored, bojenje i hit testiranje.
4. Painting: Motor koristi Skia (na mobilnim i desktop platformama) ili CanvasKit (na vebu) za crtanje Render objekata na ekranu.

Reaktivno programiranje:

Flutter koristi reaktivni pristup za građu UI-ja. Kada se promeni stanje aplikacije, framework rekonstruiše taj deo drveta vidžeta koji zavisi od tog stanja. To se dešava automatski i efikasno zahvaljujući mehanizmu diffing i brzom kreiranju i uništavanju vidžeta.

Hot Reload i Hot Restart:

• Hot Reload: Umeće ažurirani Dart kod u pokrenutu aplikaciju bez gubitka stanja. Idealan za brzu iteraciju UI-ja.
• Hot Restart: Restartuje aplikaciju od početka sa ažuriranim kodom i resetovanim stanjem. Koristi se kada Hot Reload ne radi, na primer, pri promenama u initState ili globalnim promenljivima.

Kôd specifičan za platformu:

Flutter omogućava interakciju sa nativnim API-jem platforme putem platformskih kanala (Platform Channels). To omogućava pozivanje metoda nativnog koda (Java/Kotlin na Androidu, Swift/Objective-C na iOS-u) i dobijanje rezultata nazad u Dart.

// Primer korišćenja platformskog kanala
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 = 'Nivo baterije: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Nije uspelo dobiti nivo baterije: '${e.message}'.";
  }
  // Ažuriranje UI
}