Flutter — βασικές έννοιες, αρχιτεκτονική και widget

Τι είναι το Flutter

Flutter είναι ένα SDK (Software Development Kit) και framework για τη δημιουργία διεπαφών χρήστη, που ανακοινώθηκε από την Google το 2015. Η πρώτη σταθερή έκδοση Flutter 1.0 κυκλοφόρησε τον Δεκέμβριο του 2018. Σε αντίθεση με το React Native, το Flutter δεν χρησιμοποιεί γέφυρα μεταξύ JavaScript και native κώδικα — μεταγλωττίζεται απευθείας σε native εντολές επεξεργαστή.

Το βασικό χαρακτηριστικό του Flutter είναι η δική του μηχανή απόδοσης. Το framework δεν βασίζεται στο UIKit (iOS) ή στο σύστημα View του Android. Αντίθετα, το Flutter σχεδιάζει κάθε εικονοστοιχείο ανεξάρτητα μέσω της Skia (έως το 2024) ή της νέας μηχανής Impeller. Αυτό εγγυάται την ίδια εμφάνιση της εφαρμογής σε όλες τις πλατφόρμες και εξαλείφει προβλήματα προσαρμογής σε διαφορετικές εκδόσεις OS.

Σύμφωνα με τα δεδομένα της Statista 2024, το Flutter κατέχει την πρώτη θέση μεταξύ των cross-platform frameworks σε δημοτικότητα: περίπου το 46% των προγραμματιστών το χρησιμοποιεί για ανάπτυξη εφαρμογών για κινητά. Το framework χρησιμοποιείται σε έργα Google Pay, Alibaba, eBay, BMW και Tencent.

Ιστορία και εκδόσεις Flutter

Η πρώτη έκδοση alpha του Flutter παρουσιάστηκε στο Dart Developer Summit το 2015 με το όνομα Sky. Το 2018 κυκλοφόρησε το Flutter 1.0 με υποστήριξη μόνο για iOS και Android. Το Flutter 2.0 (2021) πρόσθεσε Web και Desktop. Το Flutter 3.0 (2022) εισήγαγε σταθερή υποστήριξη για macOS και Linux. Το Flutter 3.16 (2023) παρουσίασε το Impeller — μια νέα μηχανή απόδοσης βασισμένη σε Metal και Vulkan.

Η έκδοση Flutter 3.22 (2024) περιλαμβάνει το Impeller από προεπιλογή στο iOS, βελτιωμένη υποστήριξη για Material Design 3, Dart 3.4 με επεκτάσεις μακροεντολών και ενσωματωμένη υποστήριξη για Native Assets για άμεση πρόσβαση σε πόρους πλατφόρμας. Η Google αναφέρει ότι το Impeller μειώνει την απώλεια καρέ (jank) κατά 90% σε σύγκριση με το Skia.

Γλώσσα Dart

Dart είναι μια γλώσσα προγραμματισμού που δημιουργήθηκε από την Google το 2011 και χρησιμοποιείται στο Flutter. Η Dart συνδυάζει αυστηρή τυποποίηση με δυνατότητες μεταγλώττισης JIT (για Hot Reload) και μεταγλώττισης AOT (για εκδόσεις παραγωγής). Η έκδοση Dart 3.0 (2023) εισήγαγε pattern matching, sealed class και records ως σταθερές λειτουργίες.

Null safety στη Dart — υποχρεωτική λειτουργία που εισήχθη από την έκδοση 2.12. Ο μεταγλωττιστής ελέγχει όλους τους τύπους nullable στο στάδιο δημιουργίας, εξαλείφοντας το NullPointerException κατά τον χρόνο εκτέλεσης. Οι τύποι δεδομένων (int, String, bool) είναι από προεπιλογή non-nullable, και για τιμές nullable χρησιμοποιείται το επίθημα ? (π.χ. String? name).

Αρχιτεκτονική Flutter

Η αρχιτεκτονική Flutter είναι χτισμένη σε τριών επιπέδων αρχή. Το κάτω επίπεδο — η μηχανή (C/C++), υπεύθυνη για απόδοση, είσοδο/έξοδο και πρόσβαση σε API πλατφόρμας. Το μεσαίο επίπεδο — το framework (Dart), που υλοποιεί το σύστημα widget, χειρονομιών, κινήσεων και πλοήγησης. Το πάνω επίπεδο — η εφαρμογή (Dart), που συλλέγει τα widget σε ένα δέντρο.

Widget και δέντρο widget

Στο Flutter όλα είναι widget. Τα widget είναι δύο τύπων: StatelessWidget (αμετάβλητο, δεν αποθηκεύει κατάσταση) και StatefulWidget (μεταβλητό, διαχειρίζεται κατάσταση μέσω State). Το δέντρο widget (Widget Tree) είναι μια ιεραρχική δομή όπου κάθε θυγατρικό widget είναι ένθετο σε ένα γονικό. Scaffold, AppBar, Container, Text, Column, Row — τα βασικά δομικά στοιχεία.

BuildContext είναι ένα αντικείμενο που μεταδίδει τη θέση του widget στο δέντρο. Το MediaQuery.of(context) λαμβάνει διαστάσεις οθόνης, το Theme.of(context) — το τρέχον θέμα. Το BuildContext χρησιμοποιείται για πλοήγηση (Navigator.of(context)), πρόσβαση σε InheritedWidget και μετάφραση locale μέσω Localizations.of.

Μηχανή Impeller

Impeller είναι μια σύγχρονη μηχανή απόδοσης Flutter, γραμμένη σε C++ και χρησιμοποιεί Metal (iOS/macOS) και Vulkan (Android). Σε αντίθεση με το Skia, που ανασχεδίαζε κάθε καρέ από την αρχή, το Impeller μεταγλωττίζει shaders εκ των προτέρων και τα αποθηκεύει στην προσωρινή μνήμη. Αυτό εξαλείφει καθυστερήσεις στην πρώτη απόδοση σύνθετων σκηνών και μειώνει το φορτίο GPU.

Οι δοκιμές της Google Flutter Team δείχνουν ότι το Impeller μειώνει τον χρόνο μεταγλώττισης shaders από 200–500 ms (Skia) σε 1–3 ms. Σε iPhone 13 Pro, η απόδοση Impeller φτάνει τα 120 FPS χωρίς απώλεια καρέ. Σε Android με Vulkan, σταθερά 60 FPS ακόμα και σε συσκευές μεσαίας κατηγορίας (Xiaomi Redmi Note 12).

Παράδειγμα εφαρμογής στο Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Εφαρμογή Flutter')),
        body: const Center(
          child: Text('Γεια σου, Flutter!'),
        ),
      ),
    );
  }
}

Πλεονεκτήματα Flutter

Ενιαία βάση κώδικα — το κύριο πλεονέκτημα του Flutter. Ένα έργο σε Dart μεταγλωττίζεται για iOS, Android, Web, Windows, macOS και Linux. Σύμφωνα με εκτιμήσεις της Google, αυτό μειώνει τον χρόνο ανάπτυξης κατά 30–50% σε σύγκριση με ξεχωριστά έργα iOS και Android. Η Alibaba μείωσε τον χρόνο κυκλοφορίας εκδόσεων κατά 30% μετά τη μετάβαση στο Flutter.

Απόδοση του Flutter είναι κοντά στη native. Η μεταγλώττιση AOT της Dart σε κώδικα μηχανής ARM και x86_64 εξαλείφει καθυστερήσεις διερμηνείας. Η μηχανή Impeller εγγυάται 60 FPS ακόμα και σε συσκευές του 2018 (iPhone XR, Samsung Galaxy S9). Σύμφωνα με την Google, το 99.5% των καρέ σε εφαρμογές Flutter αποδίδονται χωρίς απώλεια.

Hot Reload — τεχνολογία άμεσης ενημέρωσης κώδικα. Ο προγραμματιστής αλλάζει τον πηγαίο κώδικα, αποθηκεύει το αρχείο και το Flutter ξαναχτίζει το δέντρο widget σε 300–800 ms χωρίς απώλεια της τρέχουσας κατάστασης της εφαρμογής. Αυτό επιταχύνει τις επαναλήψεις σχεδιασμού UI: τα περιθώρια, τα χρώματα και οι κινήσεις μπορούν να αλλάξουν σε δευτερόλεπτα χωρίς αναμονή για πλήρη αναδημιουργία.

Material Design 3 και η δική του γλώσσα σχεδιασμού Cupertino (στυλ iOS) περιλαμβάνονται στην τυπική συσκευασία του Flutter. Τα widget Material 3 υποστηρίζουν δυναμικά χρώματα (Material You), προσαρμοστική διάταξη και κίνηση μετάβασης μεταξύ οθονών. Τα CupertinoPageTransition και CupertinoNavigationBar μιμούνται τη συμπεριφορά του native iOS πλοηγού.

Προσαρμογή widget δεν απαιτεί δημιουργία προσαρμοσμένων View σε κάθε πλατφόρμα. Αρκεί να παρακάμψετε το build() και να επιστρέψετε ένα νέο widget. Τα πακέτα animation (AnimatedContainer, Hero, TweenAnimationBuilder) και gesture (GestureDetector, Dismissible) καλύπτουν το 95% των σεναρίων κίνησης UI χωρίς σύνταξη κώδικα πλατφόρμας.

Οικοσύστημα και πακέτα Flutter

pub.dev — το επίσημο μητρώο πακέτων για Dart και Flutter. Μέχρι τον Ιούλιο του 2024, πάνω από 45.000 πακέτα είχαν δημοσιευθεί στο μητρώο. Η εγκατάσταση ενός πακέτου γίνεται με την εντολή flutter pub add <όνομα_πακέτου>. Το Pub επιλύει αυτόματα εξαρτήσεις, ελέγχει συμβατότητα εκδόσεων και δημιουργεί pubspec.lock.

Διαχείριση κατάστασης στο Flutter — ένα από τα βασικά αρχιτεκτονικά καθήκοντα. Εκτός από το flutter_bloc, δημοφιλείς λύσεις: Provider (συνιστάται από την Google, χρησιμοποιεί InheritedWidget), Riverpod (ανασχεδιασμένη έκδοση Provider με ασφάλεια χρόνου μεταγλώττισης) και GetX (όλα-σε-ένα: κατάσταση, δρομολόγηση, DI). Το Provider παραμένει το απλούστερο για έναρξη: το ChangeNotifierProvider τυλίγει το μοντέλο και το Consumer ανασχεδιάζει το widget όταν αλλάζουν τα δεδομένα.

Δοκιμές στο Flutter υποστηρίζονται σε τρία επίπεδα. Οι μοναδιαίες δοκιμές (flutter test) ελέγχουν συναρτήσεις και κλάσεις χωρίς UI. Οι δοκιμές widget (testWidgets) αποδίδουν μεμονωμένα widget σε απομονωμένο περιβάλλον. Οι δοκιμές ολοκλήρωσης (IntegrationTest) εκτελούν ολόκληρη την εφαρμογή σε συσκευή ή προσομοιωτή. Το Flutter 3.22 πρόσθεσε υποστήριξη για δοκιμές patch μέσω ανάλυσης patch και βελτιωμένης αναφοράς κάλυψης κώδικα.

Δημοφιλή πακέτα

dio — HTTP client με υποστήριξη για interceptors, timeouts και FormData. Χρησιμοποιείται στο 40% των έργων Flutter στο GitHub. Το Dio υποστηρίζει παρακολούθηση αιτημάτων για καταγραφή, επαναλήψεις και προσθήκη διακριτικών εξουσιοδότησης. Η δεύτερη πιο δημοφιλής βιβλιοθήκη — retrofit, δημιουργεί τυποποιημένους πελάτες API.

flutter_bloc — βιβλιοθήκη διαχείρισης κατάστασης βασισμένη στο πρότυπο BLoC (Business Logic Component). Το BlocProvider μεταδίδει καταστάσεις προς τα κάτω στο δέντρο widget, το BlocBuilder ανασχεδιάζει το UI όταν αλλάζει η κατάσταση και το BlocListener εκτελεί παρενέργειες (πλοήγηση, SnackBar). Cubet — απλοποιημένη έκδοση BLoC χωρίς συμβάντα.

go_router — δηλωτική πλοήγηση για Flutter από την Google. Οι διαδρομές περιγράφονται στη διαμόρφωση GoRouter με υποστήριξη για ένθετες διαδρομές, ανακατευθύνσεις και deep links. Το ShellRoute χωρίζει την πλοήγηση σε καρτέλες BottomNavigationBar. Το GoRouter 14.0 υποστηρίζει type-safe διαδρομές και StatefulShellRoute με διατήρηση κατάστασης καρτελών.