Τι γνωρίζετε για τη εσωτερική δομή του Flutter…

Ο πυρήνας του Flutter αποτελείται από τον κινητήρα, το πλαίσιο και τα widget.

Ο κινητήρας Flutter: Γράφτηκε σε C++ και παρέχει ένα χαμηλού επιπέδου API για απόδοση, επεξεργασία κειμένου, ροές και πρόσθετα. Απευθείας αλληλεπιδρά με την πλατφόρμα (iOS, Android, Web, Desktop) και τα γραφικά API (π.χ. Skia). Ο κινητήρας διαχειρίζεται την απόδοση, τις ασύγχρονες λειτουργίες και τον κύκλο ζωής της εφαρμογής.
Το πλαίσιο Flutter (Framework): Γράφτηκε σε Dart και παρέχει ένα επίπεδο αφαίρεσης πάνω από τον κινητήρα. Περιλαμβάνει πολλά έτοιμα συστατικά:
- Foundation: Βασικές κλάσεις και βοηθητικές λειτουργίες.
- Rendering: Επίπεδο για διαχείριση του δέντρου αντικειμένων απόδοσης και της απόδοσής τους.
- Widgets: Βασικά δομικά στοιχεία UI, που σχηματίζουν το δέντρο widget.
- Material Design και Cupertino: Σύνολα widget που υλοποιούν το στυλ Material Design και το σχεδιασμό σε στιλ iOS.
Widgets: Στο Flutter, όλα είναι widget. Περιγράφουν τη διαμόρφωση του UI. Υπάρχουν δύο βασικοί τύποι:
- StatelessWidget: Widget χωρίς εσωτερική μεταβλητή κατάσταση. Το UI του εξαρτάται μόνο από τις εισόδους του (properties).
- StatefulWidget: Widget που μπορεί να έχει μεταβλητή κατάσταση. Αποτελείται από το ίδιο το widget και το αντικείμενο State, όπου αποθηκεύεται η κατάσταση και η λογική κατασκευής UI (build μέθοδος).

Διαδικασία απόδοσης:

Build: Το πλαίσιο καλεί τη μέθοδο build() του widget, η οποία επιστρέφει το δέντρο άλλων widget.
Element Tree: Βάσει του δέντρου widget δημιουργείται το δέντρο στοιχείων (Element Tree), που αντιπροσωπεύει τη δομή του UI. Τα στοιχεία συνδέουν τα widget με τα αντίστοιχα αντικείμενα απόδοσης.
Render Object Tree: Τα στοιχεία δημιουργούν και διαχειρίζονται το δέντρο αντικειμένων απόδοσης (Render Object Tree). Τα αντικείμενα απόδοσης είναι υπεύθυνα για το μέγεθος, το χρωμάτισμα και το hit testing.
Painting: Ο κινητήρας χρησιμοποιεί το Skia (σε κινητά και επιτραπέζιους υπολογιστές) ή το CanvasKit (στο web) για την απόδοση των Render Objects στην οθόνη.

Αντιδραστικός Προγραμματισμός:

Το Flutter χρησιμοποιεί μια αντιδραστική προσέγγιση για τη δημιουργία UI. Όταν αλλάζει η κατάσταση της εφαρμογής, το πλαίσιο ανακατασκευάζει το μέρος του δέντρου widget που εξαρτάται από αυτήν την κατάσταση. Αυτό γίνεται αυτόματα και αποδοτικά χάρη στον μηχανισμό diffing και στη γρήγορη δημιουργία και καταστροφή widget.

Ζεστή επαναφόρτωση (Hot Reload) και Ζεστός επανεκκίνηση (Hot Restart):

Hot Reload: Εισάγει τον ενημερωμένο κώδικα Dart στην εκτελούμενη εφαρμογή χωρίς απώλεια κατάστασης. Ιδανικό για γρήγορη επανάληψη UI.
Hot Restart: Επανεκκινεί την εφαρμογή από την αρχή με τον ενημερωμένο κώδικα και την επαναφορά της κατάστασης. Χρησιμοποιείται όταν το Hot Reload δεν λειτουργεί, π.χ. σε αλλαγές στο initState ή σε παγκόσμιες μεταβλητές.

Κώδικας ειδικός στην πλατφόρμα:

Το Flutter επιτρέπει την αλληλεπίδραση με τις εγγενείς API της πλατφόρμας μέσω των καναλιών πλατφόρμας (Platform Channels). Αυτό επιτρέπει την κλήση μεθόδων εγγενούς κώδικα (Java/Kotlin σε Android, Swift/Objective-C σε iOS) και την λήψη αποτελεσμάτων πίσω στη Dart.

// Παράδειγμα χρήσης Platform Channel
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 = 'Επίπεδο μπαταρίας: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Δεν ήταν δυνατή η λήψη του επιπέδου μπαταρίας: '${e.message}'.";
  }
  // Ενημέρωση UI
}

Τι γνωρίζετε για τη εσωτερική δομή του Flutter;