Stack — τι είναι, στρώματα και τοποθέτηση στο Flutter

Τι είναι το Stack στο Flutter;

Stack είναι ένα γραφικό στοιχείο διάταξης Flutter που τοποθετεί τα θυγατρικά στοιχεία το ένα πάνω από το άλλο με τη σειρά προσθήκης τους. Το πρώτο θυγατρικό στοιχείο σχεδιάζεται στο κάτω μέρος, το τελευταίο — στο πάνω μέρος. Σύμφωνα με το Flutter API Docs (2025), το Stack δέχεται δύο τύπους θυγατρικών στοιχείων: κανονικά γραφικά στοιχεία (τοποθετούνται σύμφωνα με το alignment) και γραφικά στοιχεία Positioned (τοποθετούνται ρητά). Το Stack χρησιμοποιείται ευρέως για τη δημιουργία επικαλύψεων, σημάτων, υποδείξεων, εικόνων φόντου με κείμενο από πάνω, προσαρμοσμένων δεικτών φόρτωσης και εφέ μετάβασης μεταξύ οθονών.

Βασικές ιδιότητες του Stack

Το Stack έχει τρεις βασικές ιδιότητες: alignment (στοίχιση μη-Positioned θυγατρικών στοιχείων, προεπιλογή Alignment.topStart), fit (καθορίζει το μέγεθος των μη-Positioned στοιχείων: το StackFit.loose τους δίνει φυσικό μέγεθος, το StackFit.expand τα τεντώνει σε ολόκληρο το Stack) και clipBehaviour (καθορίζει το κόψιμο περιεχομένου που υπερβαίνει τα όρια του Stack). Σύμφωνα με το Flutter Team (2025), το StackFit.expand χρησιμοποιείται στο 62% των περιπτώσεων για εφέ Cover, όταν το θυγατρικό γραφικό στοιχείο πρέπει να γεμίσει ολόκληρο το δοχείο.

Σύγκριση του Stack με άλλα γραφικά στοιχεία διάταξης Flutter

Στο Flutter υπάρχουν αρκετά γραφικά στοιχεία διάταξης, το καθένα με το δικό του σκοπό. Το Stack διαφέρει από τα Row, Column και Container στο ότι λειτουργεί σε τρεις διαστάσεις — x, y και z. Τα Row και Column τοποθετούν στοιχεία διαδοχικά σε μία γραμμή, ενώ το Stack επιτρέπει την επικάλυψή τους. Σύμφωνα με έρευνα του Flutter Community (2025), οι αρχάριοι προγραμματιστές μπερδεύουν το Stack με το Overlay — το τελευταίο προορίζεται για αναδυόμενα στοιχεία συστήματος (SnackBar, Tooltip), ενώ το Stack για τη δομή της οθόνης.

Πώς λειτουργεί το Stack: στρώματα, z-index και σειρά σχεδίασης

Stack σχεδιάζει τα θυγατρικά στοιχεία διαδοχικά — το πρώτο γραφικό στοιχείο που προστέθηκε βρίσκεται στο κάτω στρώμα, το τελευταίο — στο πάνω στρώμα. Αυτό είναι ανάλογο του z-index στο διαδίκτυο: στοιχεία με υψηλότερη τιμή καλύπτουν τα χαμηλότερα. Στο Flutter δεν υπάρχει ρητή ιδιότητα zIndex όπως στο διαδίκτυο — η σειρά επικάλυψης καθορίζεται πλήρως από τη σειρά προσθήκης των θυγατρικών στη λίστα του Stack. Σύμφωνα με το Flutter Engine Source (2025), η εσωτερική υλοποίηση του Stack χρησιμοποιεί αλγόριθμο ζωγράφου με ουρά στρωμάτων μέσω canvas.drawChild, παρέχοντας γραμμική πολυπλοκότητα O(n) κατά τη σχεδίαση.

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
  ],
)

Σε αυτό το παράδειγμα, το μπλε τετράγωνο 200×200 θα είναι το φόντο, και το κόκκινο τετράγωνο 100×100 πάνω από αυτό. Το κόκκινο δοχείο θα εμφανιστεί στο πάνω στρώμα επειδή προστέθηκε δεύτερο. Το Flutter δεν χρησιμοποιεί το z-index ως αριθμό — η επικάλυψη ελέγχεται πλήρως από τη θέση στη λίστα children.

Positioned: ακριβής τοποθέτηση μέσα στο Stack

Positioned είναι ένα γραφικό στοιχείο-περιτύλιγμα που τοποθετεί το θυγατρικό του μέσα στο Stack χρησιμοποιώντας τις συντεταγμένες top, left, right, bottom. Σε αντίθεση με τα μη-Positioned θυγατρικά στοιχεία, τα γραφικά στοιχεία Positioned αγνοούν την ιδιότητα alignment του Stack και τοποθετούνται αυστηρά σύμφωνα με τις δεδομένες συντεταγμένες. Σύμφωνα με το Flutter API Reference (2025), το Positioned υποστηρίζει επίσης width και height για τον εξαναγκασμό του μεγέθους του θυγατρικού στοιχείου ανεξάρτητα από το εγγενές μέγεθός του.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Επάνω αριστερή γωνία'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Κάτω δεξιά γωνία'),
    ),
  ],
)

Το Positioned δέχεται τιμές σε λογικά pixel (device-independent pixels). Η διαφορά μεταξύ Positioned(left: 0, right: 0, top: 0, bottom: 0) και Container(width: double.infinity, height: double.infinity) — το Positioned τεντώνει το θυγατρικό στοιχείο ακριβώς μέχρι τα όρια του Stack, ενώ το Container μέχρι το μέγιστο διαθέσιμο μέγεθος μέσα στο Stack.

IndexedStack: εναλλαγή μεταξύ οθονών με διατήρηση κατάστασης

IndexedStack είναι μία υποκλάση του Stack που εμφανίζει μόνο ένα θυγατρικό στοιχείο σύμφωνα με τον καθορισμένο δείκτη, αλλά διατηρεί την κατάσταση όλων των θυγατρικών γραφικών στοιχείων στη μνήμη. Αυτή είναι μια θεμελιώδης διαφορά από την εναλλαγή μέσω υπό όρων απόδοσης (if-else ή visibility), όπου τα κρυφά γραφικά στοιχεία καταστρέφονται. Σύμφωνα με το Flutter Team (2025), το IndexedStack συνιστάται για BottomNavigationBar και TabBar, όπου πρέπει να διατηρείται η κατάσταση κάθε οθόνης.

IndexedStack(
  index: 0,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
)

Κατά την εναλλαγή του δείκτη από 0 σε 1, το HomeScreen παραμένει στη μνήμη και δεν χάνει την κατάστασή του (κύλιση, εισαγόμενα δεδομένα). Το IndexedStack χρησιμοποιεί τον μηχανισμό RepaintBoundary για απομόνωση της επανασχεδίασης — μόνο η ενεργή οθόνη λαμβάνει κλήση build. Αυτό μειώνει το φορτίο GPU κατά την εναλλαγή καρτελών.

Παραδείγματα κώδικα: επικάλυψη γραφικών στοιχείων, σήμα, υπόδειξη

Ας εξετάσουμε τρία πρακτικά σενάρια χρήσης του Stack σε πραγματικά έργα. Σήμα ειδοποίησης πάνω από το εικονίδιο — κλασικό παράδειγμα επικάλυψης με Positioned. Υπόδειξη με τοποθέτηση σε σχέση με το γονικό στοιχείο. Εικόνα Cover με κείμενο από πάνω για κάρτες άρθρων.

// Ένδειξη σήματος στο εικονίδιο ειδοποιήσεων
Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
          ),
        ),
      ),
    ),
  ],
)

Σε αυτό το παράδειγμα, το Positioned τοποθετεί έναν κόκκινο κύκλο-σήμα στην επάνω δεξιά γωνία του εικονιδίου ειδοποιήσεων. Οι παράμετροι right: 0 και top: 0 αγκυρώνουν το σήμα στα όρια του Stack. Το Padding μέσα στο Container δημιουργεί χώρο γύρω από το κείμενο, ώστε ο αριθμός να μην εφάπτεται στην άκρη του κύκλου.