Wat weet je over de interne structuur van Flutter?

De kern van Flutter bestaat uit de engine, het framework en de widgets.

• Flutter Engine: Geschreven in C++ en biedt een low-level API voor rendering, tekstverwerking, threads en plugins. Het werkt direct samen met het platform (iOS, Android, Web, Desktop) en grafische API's (bijvoorbeeld Skia). De engine beheert rendering, asynchrone operaties en de levenscyclus van de app.

• Flutter Framework: Geschreven in Dart en biedt een abstractielaag bovenop de engine. Het bevat verschillende componenten:

  • Foundation: Basis klassen en hulpfuncties.
  • Rendering: Laag voor het beheren van de boom van renderobjecten en hun tekenen.
  • Widgets: Basisbouwstenen van de UI die de widgetboom vormen.
  • Material Design en Cupertino: Sets van widgets die Material Design-stijlen en iOS-stijlen implementeren.

• Widgets: In Flutter is alles een widget. Widgets beschrijven de UI-configuratie. Er zijn twee hoofdtypen:

  • StatelessWidget: Widget zonder mutable interne toestand. De UI hangt alleen af van de invoerparameters (properties).
  • StatefulWidget: Widget die een mutable toestand kan hebben. Bestaat uit de widget zelf en een State-object, waarin de toestand en logica voor het bouwen van de UI (build) worden opgeslagen.

Renderproces:

1. Build: Het framework roept de build()-methode van de widget aan, die een boom van andere widgets retourneert.
2. Element Tree: Op basis van de widgetboom wordt een elementboom (Element Tree) gemaakt, die de UI-structuur vertegenwoordigt. Elementen koppelen widgets aan de bijbehorende renderobjecten.
3. Render Object Tree: Elementen maken en beheren de boom van renderobjecten (Render Object Tree). Renderobjecten zijn verantwoordelijk voor layout, tekenen en hit testing.
4. Schilderen: De engine gebruikt Skia (op mobiele apparaten en desktop) of CanvasKit (op het web) om renderobjecten op het scherm te tekenen.

Reactiv programming:

Flutter gebruikt een reactieve aanpak voor het bouwen van de UI. Wanneer de toestand verandert, bouwt het framework dat deel van de widgetboom opnieuw dat afhankelijk is van die toestand. Dit gebeurt automatisch en efficiënt dankzij diffing-mechanismen en snelle creatie en vernietiging van widgets.

Hot Reload en Hot Restart:

• Hot Reload: Voegt de bijgewerkte Dart-code in de lopende app in zonder de toestand te verliezen. Ideaal voor snelle UI-iteraties.
• Hot Restart: Herstart de app vanaf nul met de bijgewerkte code en geresette toestand. Gebruikt wanneer Hot Reload niet werkt, bijvoorbeeld bij wijzigingen in initState of globale variabelen.

Platform-specifieke code:

Flutter maakt het mogelijk om te communiceren met native API's van het platform via platformkanalen (Platform Channels). Hiermee kunnen methoden van native code worden aangeroepen (Java/Kotlin op Android, Swift/Objective-C op iOS) en de resultaten worden teruggegeven aan Dart.

// Voorbeeld van het gebruik van platformkanaal
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 = 'Batterijniveau: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Kan het batterijniveau niet ophalen: '${e.message}'.";
  }
  // UI bijwerken
}