Flexible: τι είναι, αρχή λειτουργίας και ρύθμιση στην ανάπτυξη εφαρμογών για κινητά

Τι είναι το Flexible

Flexible — ένα widget-περιτύλιγμα που παρέχει στο θυγατρικό στοιχείο ευέλικτο χώρο σε ένα Flex-container. Το Flexible, όπως και το Expanded, συμμετέχει στην κατανομή του ελεύθερου χώρου, αλλά με μια βασική διαφορά: το παιδί του Flexible μπορεί να καταλάβει λιγότερο χώρο από όσο του εκχωρήθηκε, αν το δικό του μέγεθος είναι μικρότερο από τον διαθέσιμο χώρο.

Το Flexible χρησιμοποιεί τον Flex-αλγόριθμο του Flutter για να υπολογίσει τον διαθέσιμο χώρο. Πρώτα, το framework ρωτά όλα τα μη ευέλικτα παιδιά (widget χωρίς Flexible/Expanded) και υπολογίζει το intrinsic size τους. Ο υπόλοιπος χώρος διαιρείται μεταξύ των ευέλικτων παιδιών αναλογικά με τον flex-factor τους. Μετά την εκχώρηση χώρου, το Flexible ελέγχει το fit — αν είναι loose, εφαρμόζεται στο θυγατρικό στοιχείο ο περιορισμός “όχι περισσότερο από το εκχωρημένο”, επιτρέποντάς του να παραμείνει μικρό.

Χαρακτηριστικό του Flexible: αν το θυγατρικό widget έχει δικά του ελάχιστα μεγέθη (π.χ. Text με μεγάλο string), το Flexible εκχωρεί τον ζητούμενο χώρο, δεν το τεντώνει υποχρεωτικά. Αυτό καθιστά το Flexible απαραίτητο για στοιχεία των οποίων το μέγεθος πρέπει να καθορίζεται από το περιεχόμενο, όχι από το container.

Συμπέρασμα: χρησιμοποιήστε το Flexible όταν χρειάζεται να δεσμεύσετε χώρο για ένα στοιχείο, αλλά δεν θέλετε να το αναγκάσετε να τεντωθεί. Αυτό διατηρεί τα φυσικά μεγέθη του περιεχομένου κατά την ευέλικτη κατανομή layout.

FlexFit.tight vs FlexFit.loose

FlexFit — μια απαρίθμηση δύο τιμών: tight και loose. Από την επιλογή fit εξαρτάται αν το θυγατρικό widget θα τεντωθεί υποχρεωτικά στο μέγεθος του εκχωρημένου χώρου.

FlexFit.tight: το θυγατρικό στοιχείο λαμβάνει tight constraints — το ελάχιστο και μέγιστο μέγεθος είναι ίσα με τον εκχωρημένο χώρο. Το παιδί πρέπει να καταλάβει ακριβώς τόσο χώρο όσο εκχώρησε ο Flex-αλγόριθμος. Αν το παιδί είναι μικρότερο — τεντώνεται. Αν είναι μεγαλύτερο — συμπιέζεται. Συμπεριφορά ίδια με το Expanded.

FlexFit.loose: το θυγατρικό στοιχείο λαμβάνει loose constraints — το ελάχιστο μέγεθος είναι 0, το μέγιστο είναι ίσο με τον εκχωρημένο χώρο. Το παιδί μπορεί να έχει οποιοδήποτε μέγεθος από 0 έως maximum. Αν το παιδί είναι μικρό (π.χ. Text με μικρό string), παίρνει το φυσικό του πλάτος και ο υπόλοιπος χώρος παραμένει κενός.

Συμπέρασμα: FlexFit.loose — επιλογή για μπλοκ κειμένου και στοιχεία με φυσικό μέγεθος. FlexFit.tight — για αυστηρές διατάξεις στηλών όπου όλα τα στοιχεία πρέπει να έχουν το ίδιο πλάτος ή ύψος.

Πότε να χρησιμοποιείτε Flexible αντί για Expanded

Flexible και Expanded μοιάζουν, αλλά λύνουν διαφορετικά προβλήματα. Το Expanded τεντώνει πάντα το παιδί σε ολόκληρο τον διαθέσιμο χώρο. Το Flexible μπορεί να αφήσει κενό χώρο γύρω από το παιδί αν το μέγεθος του περιεχομένου είναι μικρότερο από το εκχωρημένο μερίδιο.

Σενάριο για Flexible: μέσα σε ένα Row υπάρχουν δύο κουμπιά. Το πρώτο — “Αγορά” (μικρό κείμενο), το δεύτερο — “Προσθήκη στο καλάθι” (μεγάλο κείμενο). Με Expanded και τα δύο κουμπιά θα τεντωθούν στο ίδιο πλάτος και το μικρό κείμενο θα έχει τεράστια περιθώρια. Με Flexible κάθε κουμπί θα πάρει το πλάτος του κειμένου του και ο ελεύθερος χώρος θα παραμείνει μεταξύ τους ή στις άκρες.

Σενάριο για Expanded: μέσα σε μια Column υπάρχουν τρεις κάρτες που πρέπει να έχουν το ίδιο ύψος ανεξάρτητα από το περιεχόμενο. Το Expanded μοιράζει ισότιμα το διαθέσιμο ύψος και κάθε κάρτα τεντώνεται στο ίδιο μέγεθος. Το Flexible με loose δεν είναι κατάλληλο εδώ — η μικρή κάρτα θα παραμείνει μικρή, παραβιάζοντας την ενιαία σχεδίαση.

Συμπέρασμα: επιλέξτε Flexible όταν το περιεχόμενο καθορίζει το μέγεθος του στοιχείου και ο κενός χώρος γύρω του είναι αποδεκτός. Επιλέξτε Expanded όταν όλα τα στοιχεία πρέπει να έχουν το ίδιο μέγεθος ανεξάρτητα από το περιεχόμενο.

Παραδείγματα κώδικα με Flexible

Παράδειγμα 1 δείχνει τη βασική χρήση του Flexible με FlexFit.loose σε ένα Row.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('μικρό'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('μεγάλο κείμενο για επίδειξη'),
      ),
    ),
  ],
)

Στο παράδειγμα, και τα δύο Flexible με loose fit. Το πρώτο container με μικρό κείμενο παίρνει το φυσικό του πλάτος. Το δεύτερο με μεγάλο κείμενο — το δικό του. Το Row εκχωρεί σε καθένα το μισό του διαθέσιμου πλάτους, αλλά το loose fit επιτρέπει στα container να είναι μικρότερα και ο ελεύθερος χώρος παραμένει κενός μεταξύ τους.

Παράδειγμα 2 — σύγκριση Flexible με Tight και Loose fit σε μια Column.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — τεντωμένο σε πλήρες ύψος'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — φυσικό ύψος'),
        ),
      ),
    ),
  ],
)

Στη Column, το πρώτο Flexible (tight) τεντώνει το Card στο μισό του διαθέσιμου ύψους. Το δεύτερο Flexible (loose) — το Card παίρνει ύψος ανάλογα με το περιεχόμενο και ο υπόλοιπος χώρος παραμένει κενός. Οπτικά φαίνεται πώς το tight γεμίζει υποχρεωτικά την περιοχή, ενώ το loose διατηρεί το συμπαγές μέγεθος.

Συμπέρασμα: σε κώδικα παραγωγής, το Flexible με loose εφαρμόζεται για πεδία φορμών, κουμπιά και μπλοκ κειμένου. Το Flexible με tight — ισοδύναμο του Expanded, χρησιμοποιείται για ομοιόμορφη κατανομή.

Συνήθη λάθη κατά τη χρήση του Flexible

Λάθος 1: χρήση του Flexible εκτός Flex-container. Όπως και το Expanded, το Flexible πετάει LayoutException αν δεν βρίσκεται μέσα σε Row, Column ή Flex. Λύση: ελέγχετε πάντα τη γονική αλυσίδα των widget.

Λάθος 2: σύγχυση μεταξύ Flexible και Expanded. Οι προγραμματιστές συχνά χρησιμοποιούν Expanded όταν χρειάζεται Flexible με loose fit και αντίστροφα. Αποτέλεσμα: το Expanded τεντώνει το στοιχείο με μικρό κείμενο, δημιουργώντας μεγάλα κενά πεδία. Λύση: αν το μέγεθος του στοιχείου μπορεί να είναι μικρότερο από τον εκχωρημένο χώρο — χρησιμοποιήστε Flexible(fit: FlexFit.loose).

Λάθος 3: μηδενικός flex-factor. Το Flexible με flex=0 συμπεριφέρεται ως μη ευέλικτο widget, κάτι που μπορεί να μην είναι προφανές. Ο προγραμματιστής περιμένει ευέλικτη συμπεριφορά, αλλά το στοιχείο παίρνει το ελάχιστο μέγεθος. Λύση: το flex πρέπει να είναι ≥1 για ενεργή κατανομή χώρου.

Λάθος 4: Flexible μέσα σε ScrollView χωρίς περιορισμό μεγέθους. Αν το Flexible βρίσκεται σε Column μέσα σε SingleChildScrollView, το scroll-container δίνει άπειρο χώρο και η flex-κατανομή δεν λειτουργεί. Λύση: περιορίστε το μέγεθος του scroll-container μέσω SizedBox ή ConstrainedBox.

Συμπέρασμα: το Flexible απαιτεί την ίδια προσοχή στο γονικό περιβάλλον όπως και το Expanded. Η διαφορά είναι μόνο στο fit — επιλέξτε το συνειδητά ανάλογα με την εργασία.