Route — τι είναι, τύποι και δημιουργία διαδρομών στο Flutter

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

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

Σε αντίθεση με την απλή αντικατάσταση widget, το Route παρέχει υπηρεσίες που δεν είναι διαθέσιμες στα συνηθισμένα widget: ModalBarrier (σκοτείνιασμα του φόντου όταν είναι ανοιχτό ένα παράθυρο διαλόγου), διαχείριση κινούμενης εικόνας εισόδου και εξόδου, επεξεργασία του κουμπιού “Πίσω” υλικού στο Android και ενσωμάτωση με κινούμενη εικόνα Hero για ομαλές μεταβάσεις μεταξύ οθονών.

Σύμφωνα με το Flutter Cookbook (2026), το Route είναι ένα βασικό στοιχείο για την κινούμενη εικόνα Hero: το widget Hero σε ένα Route κινεί αυτόματα τη μετάβαση στο widget Hero στο επόμενο Route, δημιουργώντας το εφέ ενός “πετώντας” στοιχείου. Αυτό είναι δυνατό ακριβώς επειδή το Route διατηρεί και τις δύο οθόνες στο Overlay κατά τη διάρκεια της κινούμενης εικόνας.

Το Route ως δομικό στοιχείο πλοήγησης

Route είναι η βάση τόσο για απλές εφαρμογές κινητών (μέσω Navigator 1.0), όσο και για πολύπλοκα σενάρια με βαθείς συνδέσμους (Navigator 2.0). Στο Navigator 2.0, το Route αντιπροσωπεύει ένα Page που το RouterDelegate μετατρέπει από τη διαμόρφωση διαδρομής. Επομένως, η κατανόηση του Route είναι απαραίτητη για εργασία με οποιοδήποτε σύστημα πλοήγησης Flutter — ανεξάρτητα από την επιλεγμένη προσέγγιση ή πακέτο.

Τύποι Route: MaterialPageRoute και CupertinoPageRoute

Flutter παρέχει πολλές ενσωματωμένες υλοποιήσεις του Route, καθεμία προσαρμόζοντας τη συμπεριφορά για μια συγκεκριμένη πλατφόρμα. Η επιλογή του σωστού τύπου Route επηρεάζει την εμπειρία χρήστη: η κινούμενη εικόνα Material στο Android και η κινούμενη εικόνα Cupertino στο iOS δημιουργούν την αίσθηση μιας “εγγενούς” εφαρμογής.

MaterialPageRoute: πρότυπο για Android

MaterialPageRoute — η πιο συχνά χρησιμοποιούμενη υλοποίηση Route. Κινεί την είσοδο μιας νέας οθόνης από κάτω προς τα πάνω με σταδιακή εμφάνιση. Κατά την έξοδο, η οθόνη κινείται από πάνω προς τα κάτω, επιστρέφοντας στην αρχική θέση. Η γραμμή εργαλείων (AppBar) και το σώμα της οθόνης κινούνται ξεχωριστά, δημιουργώντας ένα εφέ ιεραρχίας.

CupertinoPageRoute: στυλ πλοήγησης iOS

CupertinoPageRoute μιμείται το UINavigationController από το iOS. Η νέα οθόνη εισέρχεται από τα δεξιά, καλύπτοντας την προηγούμενη. Το βασικό χαρακτηριστικό — υποστήριξη για διαδραστική χειρονομία σάρωσης πίσω, υλοποιημένη μέσω CupertinoBackGestureDetector. Αυτή η χειρονομία επεξεργάζεται ακόμη και στη μέση της κινούμενης εικόνας, παρέχοντας φυσική συμπεριφορά γνώριμη στους χρήστες iPhone.

Κύκλος ζωής του Route: από τη δημιουργία στην καταστροφή

Route έχει τον δικό του κύκλο ζωής που διαφέρει από τον κύκλο ζωής ενός συνηθισμένου StatefulWidget. Η κατανόηση αυτού του κύκλου είναι απαραίτητη για τη σωστή αρχικοποίηση δεδομένων, εγγραφή σε ροές και απελευθέρωση πόρων κατά το κλείσιμο της οθόνης.

Στάδια του κύκλου ζωής του Route

Ο κύκλος ζωής του Route αποτελείται από τέσσερα κύρια στάδια. Transition — το Route δημιουργείται και κινείται κατά την είσοδο (καλείται didPush). Active — το Route εμφανίζεται πλήρως και αλληλεπιδρά με τον χρήστη. Inactive — ένα άλλο Route καλύπτει το τρέχον (παράθυρο διαλόγου, κάτω οθόνη), αλλά το Route παραμένει στη στοίβα. Disposed — το Route αφαιρείται από τη στοίβα και καταστρέφεται, καλούνται didPop και dispose.

Οι μέθοδοι κύκλου ζωής του Route μπορούν να παρακαμφθούν σε μια προσαρμοσμένη υλοποίηση. Για παράδειγμα, το didPop καλείται όταν το Route αφαιρείται από τη στοίβα — εδώ μπορεί να αποθηκευτεί ένα πρόχειρο δεδομένων. Το didChangeNext καλείται όταν το επόμενο Route στη στοίβα έχει αλλάξει — χρήσιμο για ενημέρωση του UI όταν αλλάζει το ιστορικό πλοήγησης.

Σύμφωνα με το Flutter API Route.didPop (2026), είναι σημαντικό να μην συγχέεται ο κύκλος ζωής του Route με τον κύκλο ζωής του State μέσα στο Route. Το StatefulWidget μέσα στο Route έχει τους δικούς του initState και dispose που καλούνται στα στάδια Transition και Disposed αντίστοιχα. Το Route ζει περισσότερο από το εσωτερικό του State — το Route παραμένει στο Overlay ακόμη και όταν τα widget του κρύβονται προσωρινά από ένα άλλο Route.

Μεταφορά δεδομένων μέσω Route μεταξύ οθονών

Route παρέχει μηχανισμούς για μεταφορά δεδομένων τόσο κατά την είσοδο (κατά τη δημιουργία) όσο και κατά την έξοδο (κατά την ολοκλήρωση). Η σωστή μεταφορά δεδομένων μέσω Route εξαλείφει την ανάγκη για καθολικές μεταβλητές και InheritedWidget, κάνοντας την πλοήγηση ασφαλή τύπου και προβλέψιμη.

Για τη μεταφορά δεδομένων σε μια νέα οθόνη χρησιμοποιείται ο κατασκευαστής του widget παραλήπτη ή το όρισμα arguments στο Navigator.pushNamed. Μέσα στο Route, τα δεδομένα είναι προσβάσιμα μέσω RouteSettings.arguments που αποθηκεύεται στο αντικείμενο Route. Αυτή η προσέγγιση λειτουργεί για όλους τους τύπους Route — MaterialPageRoute, CupertinoPageRoute και προσαρμοσμένες υλοποιήσεις.

Για την επιστροφή δεδομένων χρησιμοποιείται το δεύτερο όρισμα Navigator.pop(context, result). Το Navigator.push επιστρέφει ένα Future που ολοκληρώνεται με την τιμή που μεταβιβάστηκε στο pop. Εάν το pop κληθεί χωρίς όρισμα, το Future ολοκληρώνεται με null. Αυτός ο μηχανισμός είναι ανάλογος του startActivityForResult στο Android και του completion handler στο iOS, αλλά υλοποιημένος μέσω Dart Futures.

Παράδειγμα μεταφοράς δεδομένων μέσω του κατασκευαστή Route

Κατά την άμεση κλήση Navigator.push με MaterialPageRoute, τα δεδομένα μεταφέρονται μέσω του κατασκευαστή της οθόνης προορισμού. Το MethodChannel δεν χρησιμοποιείται — είναι καθαρή αλληλεπίδραση Dart. Αυτή η προσέγγιση προτιμάται για ασφαλή τύπου μεταφορά πολύπλοκων αντικειμένων.

Παράδειγμα δημιουργίας προσαρμοσμένου Route

Ας εξετάσουμε ένα παράδειγμα δημιουργίας ενός προσαρμοσμένου Route με δική του κινούμενη εικόνα και μεταφορά δεδομένων. Το PageRouteBuilder επιτρέπει τον ορισμό κινούμενης εικόνας εισόδου και εξόδου με πλήρη έλεγχο της καμπύλης κινούμενης εικόνας και διάρκειας.

// Προσαρμοσμένο Route με κινούμενη εικόνα σύρσιμου
Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) {
    return DetailPage(productId: '42');
  },
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    const begin = Offset(0.0, 0.3);
    const end = Offset.zero;
    final tween = Tween(begin: begin, end: end);
    final offsetAnimation = animation.drive(tween);
    return SlideTransition(position: offsetAnimation, child: child);
  },
  transitionDuration: const Duration(milliseconds: 400),
));

// Επιστροφή δεδομένων από οθόνη
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Επιλογή'),
);

// Λήψη αποτελέσματος στην καλούσα οθόνη
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Επιλεγμένο: ${result['selected']}');
}

Στο παράδειγμα, το PageRouteBuilder ορίζει μια προσαρμοσμένη κινούμενη εικόνα σύρσιμου από κάτω με διαφάνεια. Το transitionDuration καθορίζει την ταχύτητα της κινούμενης εικόνας. Ο κώδικας δείχνει επίσης τη μεταφορά αποτελέσματος: η οθόνη λεπτομερειών επιστρέφει ένα Map με την επιλογή του χρήστη, και η καλούσα οθόνη λαμβάνει αυτά τα δεδομένα μέσω Future από το push. Το Route εξασφαλίζει πλήρη απομόνωση: τα πρόχειρα στην οθόνη λεπτομερειών δεν επηρεάζουν την κατάσταση της λίστας.