Was wissen Sie über die interne Struktur von Flutter?

Der Kern von Flutter besteht aus der Engine, dem Framework und den Widgets.

• Flutter-Engine: Geschrieben in C++ und bietet eine Low-Level-API für Rendering, Textverarbeitung, Threads und Plugins. Es interagiert direkt mit der Plattform (iOS, Android, Web, Desktop) und den Grafik-APIs (z.B. Skia). Die Engine verwaltet das Rendering, asynchrone Operationen und den Lebenszyklus der Anwendung.

• Flutter-Framework: Geschrieben in Dart und bietet eine Abstraktionsschicht über die Engine. Es umfasst mehrere Komponenten:

  • Foundation: Grundlegende Klassen und Hilfsfunktionen.
  • Rendering: Schicht zur Verwaltung des Baums der Render-Objekte und deren Zeichnung.
  • Widgets: Grundlegende Bausteine der UI, die den Widget-Baum bilden.
  • Material Design und Cupertino: Widget-Sammlungen, die Material Design und iOS-Designstile umsetzen.

• Widgets: In Flutter ist alles ein Widget. Widgets beschreiben die UI-Konfiguration. Es gibt zwei Haupttypen:

  • StatelessWidget: Widget ohne mutable internen Zustand. Seine UI hängt nur von seinen Eingangsparametern (properties) ab.
  • StatefulWidget: Widget, das einen veränderlichen Zustand haben kann. Es besteht aus dem Widget selbst und einem State-Objekt, in dem der Zustand und die Logik der UI-Erstellung (build) gespeichert sind.

Renderprozess:

1. Build: Das Framework ruft die build()-Methode des Widgets auf, die einen Baum anderer Widgets zurückgibt.
2. Element Tree: Basierend auf dem Widget-Baum wird ein Elementbaum (Element Tree) erstellt, der die UI-Struktur repräsentiert. Elemente verbinden Widgets mit den entsprechenden Render-Objekten.
3. Render Object Tree: Elemente erstellen und verwalten den Baum der Render-Objekte (Render Object Tree). Render-Objekte sind für Layout, Malen und Hit Testing verantwortlich.
4. Painting: Der Engine verwendet Skia (auf Mobilgeräten und Desktop) oder CanvasKit (im Web), um die Render-Objekte auf dem Bildschirm zu zeichnen.

Reaktive Programmierung:

Flutter nutzt einen reaktiven Ansatz zum Aufbau der UI. Bei Zustandsänderungen baut das Framework den Teil des Widget-Baums neu auf, der von diesem Zustand abhängt. Dies geschieht automatisch und effizient durch Diffing-Mechanismen und schnelles Erstellen und Zerstören von Widgets.

Hot Reload und Hot Restart:

• Hot Reload: Fügt den aktualisierten Dart-Code in die laufende Anwendung ein, ohne den Zustand zu verlieren. Ideal für schnelle UI-Iterationen.
• Hot Restart: Startet die Anwendung neu mit dem aktualisierten Code und zurückgesetzttem Zustand. Wird verwendet, wenn Hot Reload nicht funktioniert, z.B. bei Änderungen in initState oder globalen Variablen.

Plattformspezifischer Code:

Flutter ermöglicht die Interaktion mit nativen Plattform-APIs über Plattformkanäle (Platform Channels). Damit können native Methoden (Java/Kotlin auf Android, Swift/Objective-C auf iOS) aufgerufen und Ergebnisse zurückgegeben werden.

// Beispiel für die Verwendung eines Plattformkanals
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 = 'Batteriestand: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Konnte den Batteriestand nicht abrufen: '${e.message}'.";
  }
  // UI aktualisieren
}