Navigator: διαχείριση οθονών στο Flutter

Τι είναι το Navigator στο Flutter

Navigator — είναι ένα widget που διαχειρίζεται τη στοίβα αντικειμένων Route και υλοποιεί την πλοήγηση οθόνης σε μια εφαρμογή Flutter. Κάθε κλήση push τοποθετεί ένα νέο Route στην κορυφή της στοίβας, το pop αφαιρεί το κορυφαίο Route και επιστρέφει στην προηγούμενη οθόνη. Το MaterialApp δημιουργεί αυτόματα ένα Navigator για ολόκληρη την εφαρμογή, καθιστώντας το προσβάσιμο μέσω Navigator.of(context).

Σε αντίθεση με το StatefulWidget, όπου η αντικατάσταση περιεχομένου γίνεται μέσω setState μέσα σε ένα widget, το Navigator λειτουργεί σε ολόκληρες οθόνες με δικό τους κύκλο ζωής. Κάθε Route στη στοίβα είναι μια απομονωμένη κατάσταση με δικό του BuildContext, που αποτρέπει τις διαρροές μνήμης και απλοποιεί τη διαχείριση εξαρτήσεων. Κατά την κλήση pop, το αχρηστοποίητο Route καταστρέφεται, απελευθερώνοντας πόρους.

Σύμφωνα με Flutter Navigation Guide (2026), το Navigator εξελίχθηκε από το imperative API (Navigator 1.0) στο δηλωτικό (Navigator 2.0). Το Navigator 1.0 χρησιμοποιεί απευθείας τις μεθόδους push/pop, που είναι βολικό για απλά σενάρια. Το Navigator 2.0 (Router) είναι κατάλληλο για εφαρμογές με βαθιά links, προσαρμοστική πλοήγηση και διαδρομολόγηση web.

Πώς λειτουργεί το Navigator εσωτερικά

Εσωτερικά, το Navigator χρησιμοποιεί Overlay — ένα ειδικό widget που εμφανίζει τα Route το ένα πάνω στο άλλο. Κάθε Route δημιουργεί τη δική του θέση στο Overlay με έναν δείκτη Z που αντιστοιχεί στο βάθος στη στοίβα. Αυτό εξηγεί γιατί στο push η νέα οθόνη εμφανίζεται με animation πάνω από την προηγούμενη, και στο pop — η προηγούμενη οθόνη είναι ήδη έτοιμη για εμφάνιση: δεν καταστράφηκε, απλώς παρέμεινε στο Overlay κάτω από το νέο.

Για τα animation μεταβάσεων, το Navigator χρησιμοποιεί το PageTransitionsTheme, που μπορεί να αντικατασταθεί στο ThemeData. Τα animation πλατφόρμας ορίζονται μέσω CupertinoPageRoute για iOS (σύρση από δεξιά) και MaterialPageRoute για Android (σύρση από κάτω). Το Navigator επιλέγει αυτόματα το σωστό animation όταν χρησιμοποιεί το PlatformRoute.

Μέθοδοι Navigator: push, pop και pushReplacement

Navigator παρέχει ένα σύνολο μεθόδων για τη διαχείριση της στοίβας Route. Κάθε μέθοδος λύνει ένα συγκεκριμένο έργο πλοήγησης — από μια απλή μετάβαση μέχρι την πλήρη αντικατάσταση του ιστορικού οθόνης. Ας δούμε τις κύριες μεθόδους με παραδείγματα χρήσης.

Push και Pop: βασικές λειτουργίες

Η μέθοδος push δέχεται ένα Route και επιστρέφει ένα Future με το αποτέλεσμα που μεταβιβάζεται στο pop. Αυτό επιτρέπει τη λήψη δεδομένων από την οθόνη στην οποία πλοηγηθήκαμε. Παράδειγμα, μια οθόνη επιλογής ημερομηνίας μπορεί να επιστρέψει DateTime μέσω Navigator.pop(context, selectedDate). Η μέθοδος pop χωρίς όρισμα επιστρέφει null, με όρισμα — μεταβιβάζει την τιμή στην καλούσα οθόνη.

PushReplacement: αντικατάσταση οθόνης

pushReplacement αντικαθιστά το τρέχον Route με ένα νέο, αφαιρώντας το τρέχον από τη στοίβα. Αυτό είναι κρίσιμο σε σενάρια όπου ο χρήστης δεν πρέπει να επιστρέψει στην προηγούμενη οθόνη. Τυπικό παράδειγμα — οθόνη σύνδεσης: μετά την επιτυχή σύνδεση, η τρέχουσα οθόνη αντικαθίσταται από την κύρια, και το κουμπί «Πίσω» δεν επιστρέφει στη φόρμα σύνδεσης.

Ονομασμένες διαδρομές και onGenerateRoute

Navigator υποστηρίζει πλοήγηση μέσω ονομασμένων διαδρομών μέσω της μεθόδου pushNamed. Αντί να δημιουργήσει απευθείας ένα Route, ο προγραμματιστής καθορίζει ένα κειμενικό αναγνωριστικό, και το Navigator δημιουργεί αυτόματα ένα Route βάσει της διαμόρφωσης στο MaterialApp. Αυτό απλοποιεί τον κώδικα και κεντροποιεί τον ορισμό διαδρομών σε ένα σημείο.

Οι ονομασμένες διαδρομές ορίζονται μέσω της ιδιότητας routes στο MaterialApp, όπου κάθε κλειδί είναι ένα string διαδρομής και η τιμή είναι μια συνάρτηση που επιστρέφει ένα Widget. Για δυναμικές διαδρομές (με παραμέτρους), χρησιμοποιείται το onGenerateRoute — ένα callback που λαμβάνει RouteSettings και επιστρέφει ένα Route. Αυτό επιτρέπει τη μεταβίβαση ορισμάτων μέσω arguments και την υλοποίηση βαθιάς πλοήγησης.

Σύμφωνα με Flutter Cookbook (2026), η μεταβίβαση ορισμάτων μέσω pushNamed γίνεται με την παράμετρο arguments: Object?. Η οθόνη λήψης εξάγει τα ορίσματα μέσω ModalRoute.of(context)!.settings.arguments, που εξασφαλίζει ασφαλή μεταφορά δεδομένων χωρίς συνολικές μεταβλητές ή InheritedWidget.

Χειρισμός άγνωστων διαδρομών

Η ιδιότητα onUnknownRoute στο MaterialApp διαχειρίζεται περιπτώσεις όπου το pushNamed καλείται με μια ανύπαρκτη διαδρομή. Αυτό είναι χρήσιμο για την εμφάνιση οθόνης 404 ή ανακατεύθυνση στην κύρια σελίδα. Σε συνδυασμό με το onGenerateRoute, εξασφαλίζει πλήρη κάλυψη όλων των δυνατών σεναρίων πλοήγησης.

Navigator 2.0 και δηλωτική πλοήγηση Router

Navigator 2.0 (γνωστό και ως Router API) — είναι μια δηλωτική προσέγγιση στην πλοήγηση, που εισήχθη στο Flutter 2.0. Σε αντίθεση με το imperative Navigator 1.0, όπου ο προγραμματιστής καλεί push/pop, το Router διαχειρίζεται την πλοήγηση μέσω κατάστασης, συγχρονίζοντας αυτόματα το URL του προγράμματος πλοήγησης με την τρέχουσα οθόνη. Αυτό είναι ιδιαίτερα σημαντικό για εφαρμογές web και εκδόσεις desktop.

Η αρχιτεκτονική του Navigator 2.0 αποτελείται από τρία βασικά συστατικά: το RouteInformationParser αναλύει το URL σε διαμόρφωση διαδρομής, το RouterDelegate μετατρέπει τη διαμόρφωση σε λίστα Route, και το BackButtonDispatcher διαχειρίζεται το κουμπί συστήματος «Πίσω». Τέτοια αρχιτεκτονική καθιστά την πλοήγηση πλήρως προβλεπτή και δοκιμάσιμη.

Για την απλοποίηση της εργασίας με το Navigator 2.0, υπάρχουν πακέτα wrapper: go_router (συνιστάται από τη Google), auto_route και beamer. Το go_router παρέχει ένα δηλωτικό DSL για τον ορισμό διαδρομών με υποστήριξη για εμφωλευμένη πλοήγηση, ανακατευθύνσεις και βαθιά links χωρίς χειροκίνητη υλοποίηση RouterDelegate. Σύμφωνα με pub.dev (2026), το go_router χρησιμοποιείται σε 35% των νέων έργων Flutter που προτιμούν τη δηλωτική προσέγγιση.

Παράδειγμα πλοήγησης σε εφαρμογή Flutter

Ας δούμε ένα παράδειγμα Navigator με ονομασμένες διαδρομές και μεταφορά δεδομένων μεταξύ οθονών. Ο κώδικας δείχνει μια οθόνη λίστας προϊόντων, μετάβαση στην οθόνη λεπτομερειών και επιστροφή με αποτέλεσμα.

// Ρύθμιση διαδρομής στο MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Πλοήγηση με μεταφορά δεδομένων
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Λήψη δεδομένων στην οθόνη λήψης
final args = ModalRoute.of(context)!.settings.arguments as String;

// Αντικατάσταση οθόνης μετά τη σύνδεση
Navigator.pushReplacementNamed(context, '/home');

// Εκκαθάριση στοίβας μέχρι την κύρια οθόνη
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

Στο παράδειγμα, το Navigator.pushNamed μεταβιβάζει το αναγνωριστικό προϊόντος στην οθόνη λεπτομερειών. Κατά την επιστροφή μέσω Navigator.pop(context, updatedProduct), η καλούσα οθόνη λαμβάνει τα ενημερωμένα δεδομένα στη μεταβλητή result. Το pushReplacementNamed αντικαθιστά την τρέχουσα οθόνη μετά την εξουσιοδότηση, και το pushNamedAndRemoveUntil με συνθήκη (route) => false καθαρίζει τελείως τη στοίβα, αποτρέποντας την επιστροφή σε προηγούμενες οθόνες.