Mit tud a Flutter belső felépítéséről?

A Flutter magja motorból, keretből és widgetekből áll.

• Flutter motor: C++-ban íródott, és alacsony szintű API-t nyújt a rendereléshez, szövegkezeléshez, szálakhoz és bővítményekhez. Közvetlenül kommunikál a platformmal (iOS, Android, Web, Desktop) és grafikus API-kkal (pl. Skia). A motor kezeli a rajzolást, az aszinkron műveleteket és az alkalmazás életciklusát.

• Flutter keret (Framework): Dart nyelven íródott, és absztrakciós réteget biztosít a motor felett. Számos kész komponensből áll:

  • Foundation: Alap osztályok és segédfüggvények.
  • Rendering: Szint a render objektumfa kezeléséhez és rajzolásához.
  • Widgets: Az UI fő építőelemei, amelyek a widget fa struktúráját alkotják.
  • Material Design és Cupertino: Widget készletek, amelyek a Material Design stílusát és az iOS stílusú dizájnt valósítják meg.

• Widgetek: A Flutterben minden widget. Leírják a UI konfigurációját. Két fő típusuk van:

  • StatelessWidget: Olyan widget, amelynek nincs belső változtatható állapota. UI-ja csak a bemeneti paraméterektől függ (properties).
  • StatefulWidget: Olyan widget, amely változtatható állapottal rendelkezhet. Maga a widget és a State objektum alkotja, ahol az állapot és a UI építési logika (build metódus) tárolódik.

Renderelési folyamat:

1. Build: A keretrendszer meghívja a widget build() metódusát, amely egy másik widgetekből álló fát ad vissza.
2. Element Tree: A widget fa alapján létrejön az elemfák (Element Tree), amely a UI szerkezetét reprezentálja. Az elemek összekapcsolják a widgeteket a megfelelő render objektumokkal.
3. Render Object Tree: Az elemek létrehoznak és kezelnek egy render objektumfát (Render Object Tree). A render objektumok felelősek a méretezésért, színezésért és a hit tesztelésért.
4. Painting: A motor a Skia-t (mobil és desktop esetén) vagy a CanvasKit-et (weben) használja a render objektumok megjelenítéséhez a képernyőn.

Reaktív programozás:

A Flutter reaktív megközelítést alkalmaz a UI építéséhez. Amikor az alkalmazás állapota megváltozik, a keretrendszer újraépíti az állapottól függő widgetek részét. Ez automatikusan és hatékonyan történik a diffing mechanizmusnak és a widgetek gyors létrehozásának és megsemmisítésének köszönhetően.

Hot Reload és Hot Restart:

• Hot Reload: A frissített Dart kódot beilleszti a futó alkalmazásba anélkül, hogy elveszítené az állapotot. Gyors UI iterációhoz ideális.
• Hot Restart: Az alkalmazást újraindítja nulláról, a frissített kóddal és az állapot resetjével. Akkor használják, ha a Hot Reload nem működik, például az initState vagy globális változók módosításakor.

Platform-specifikus kód:

A Flutter lehetővé teszi a natív API-khoz való hozzáférést platformcsatornák (Platform Channels) segítségével. Ez lehetővé teszi natív kódmetódusok (Java/Kotlin Androidon, Swift/Objective-C iOS-en) hívását és eredmények visszakapását Dartba.

// Platform csatorna használatának példája
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 = 'Akkumulátor szintje: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Nem sikerült lekérni a töltöttség szintjét: '${e.message}'.";
  }
  // UI frissítése
}