MediaQuery — τι είναι, αρχή λειτουργίας και προσαρμοστικές διατάξεις

Τι είναι το MediaQuery

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

Όταν το Flutter εκκινεί την εφαρμογή, δημιουργεί μια παρουσία MediaQueryData που περιέχει όλες τις μετρήσεις της τρέχουσας συσκευής. Αυτά τα δεδομένα ενημερώνονται αυτόματα σε αλλαγές: περιστροφή συσκευής, αλλαγή μεγέθους παραθύρου (σε επιτραπέζιο), εμφάνιση πληκτρολογίου ή αλλαγή ρυθμίσεων προσβασιμότητας συστήματος. Το MediaQuery ανακατασκευάζει το υποδέντρο widget με κάθε αλλαγή δεδομένων, εξασφαλίζοντας αντιδραστική προσαρμογή της διεπαφής.

Το MediaQueryData περιλαμβάνει: size (μέγεθος οθόνης), devicePixelRatio (πυκνότητα pixel), textScaleFactor (κλίμακα γραμματοσειράς από ρυθμίσεις συστήματος), viewInsets (περιοχή που καλύπτεται από πληκτρολόγιο), viewPadding (περιθώρια συστήματος), orientation (προσανατολισμός) και platformBrightness (ανοιχτό ή σκούρο θέμα).

Συμπέρασμα: MediaQuery — κεντρική πηγή πληροφοριών συσκευής στο Flutter. Η πρόσβαση στο MediaQuery.of(context) είναι το πρώτο βήμα για την κατασκευή οποιασδήποτε προσαρμοστικής διεπαφής.

Κύριες ιδιότητες του MediaQueryData

MediaQueryData περιέχει δεκάδες ιδιότητες, αλλά οι πιο συχνά χρησιμοποιούμενες είναι εκείνες που επηρεάζουν την κατασκευή διάταξης. Ας εξετάσουμε τις βασικές.

Size — μέγεθος οθόνης

MediaQuery.of(context).size επιστρέφει ένα αντικείμενο Size με το πλάτος και ύψος της οθόνης σε λογικά pixel (device-independent pixels, dip). Αυτές οι τιμές δεν λαμβάνουν υπόψη τα περιθώρια συστήματος. Για υπολογισμούς προσαρμοστικών διατάξεων, το size είναι η κύρια μέτρηση: βάσει αυτού καθορίζονται breakpoints για διάταξη κινητού, tablet και επιτραπέζιου.

ViewPadding — περιθώρια συστήματος

ViewPadding — περιθώρια που δεσμεύει το σύστημα για τη γραμμή κατάστασης, το notch (εγκοπή οθόνης), το πλαίσιο πλοήγησης συστήματος και τον δείκτη αρχικής οθόνης (στο iOS). Χωρίς αυτά τα περιθώρια, το περιεχόμενο μπορεί να βρεθεί κάτω από στοιχεία συστήματος. Το MediaQuery.of(context).padding επιστρέφει EdgeInsets που πρέπει να εφαρμοστεί ως padding στο ριζικό δοχείο της σελίδας.

ViewInsets — περιοχή πληκτρολογίου

ViewInsets — η περιοχή οθόνης που καλύπτεται από το λογισμικό πληκτρολόγιο. Για πεδία εισόδου, είναι κρίσιμο να παρακολουθείται το viewInsets.bottom για να ανυψώνεται το περιεχόμενο πάνω από το πληκτρολόγιο. Το Flutter το χειρίζεται αυτόματα στο scaffold, αλλά για προσαρμοσμένες διατάξεις πρέπει να χρησιμοποιείται απευθείας το MediaQuery.of(context).viewInsets.

Orientation — προσανατολισμός συσκευής

Orientation — κατακόρυφος (portrait) ή οριζόντιος (landscape) προσανατολισμός. Καθορίζεται συγκρίνοντας πλάτος και ύψος: αν το πλάτος είναι μικρότερο από το ύψος — portrait, διαφορετικά — landscape. Σε κώδικα παραγωγής, ο προσανατολισμός χρησιμοποιείται για εναλλαγή μεταξύ κάθετης και οριζόντιας διάταξης στοιχείων.

Συμπέρασμα: τέσσερις βασικές ιδιότητες — size, viewPadding, viewInsets και orientation — καλύπτουν το 90% των εργασιών προσαρμοστικού σχεδιασμού. Οι υπόλοιπες ιδιότητες (textScaleFactor, platformBrightness, devicePixelRatio) χρησιμοποιούνται για συγκεκριμένα σενάρια.

Χρήση του MediaQuery για προσαρμοστικές διατάξεις

MediaQuery — η βάση του προσαρμοστικού σχεδιασμού στο Flutter. Μέσω αυτού καθορίζονται breakpoints, η διάταξη αλλάζει ανάλογα με το μέγεθος οθόνης και τα περιθώρια προσαρμόζονται για διαφορετικές συσκευές.

Τυπικό σενάριο: η εφαρμογή κινητού πρέπει να εμφανίζει λίστα προϊόντων. Σε τηλέφωνο (πλάτος < 600dp) — μία στήλη. Σε tablet (πλάτος 600–900dp) — δύο στήλες. Σε επιτραπέζιο (πλάτος > 900dp) — τρεις στήλες. Το MediaQuery.of(context).size.width επιτρέπει δυναμική επιλογή του αριθμού στηλών χωρίς ξεχωριστή οθόνη για κάθε παράγοντα μορφής.

Δεύτερο σενάριο: λήψη υπόψη των system gesture insets σε σύγχρονες συσκευές. Σε iPhone με Dynamic Island ή Android με gesture navigation, τα περιθώρια συστήματος καταλαμβάνουν μέρος της οθόνης. Το MediaQuery.of(context).padding επιστρέφει σωστές τιμές για κάθε τύπο συσκευής και το Scaffold τις εφαρμόζει αυτόματα μέσω του body. Για προσαρμοσμένα widget, το padding πρέπει να μεταβιβάζεται ρητά από το MediaQuery.

Τρίτο σενάριο: προσαρμογή στις ρυθμίσεις προσβασιμότητας συστήματος. Το MediaQuery.of(context).textScaleFactor δείχνει πόσο έχει αυξήσει ο χρήστης τη γραμματοσειρά στις ρυθμίσεις. Σε textScaleFactor > 1.3 η διάταξη μπορεί να σπάσει — μεγάλα κείμενα βγαίνουν εκτός ορίων καρτών. Οι προσαρμοστικές διατάξεις πρέπει να το λαμβάνουν υπόψη και, αν χρειαστεί, να μεταβαίνουν σε απλούστερη διάταξη.

Συμπέρασμα: MediaQuery — όχι απλώς πηγή μετρήσεων, αλλά εργαλείο για την κατασκευή πραγματικά προσαρμοστικών διεπαφών. Χρησιμοποιήστε το για breakpoints, safe area και λήψη υπόψη προσβασιμότητας.

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

Παράδειγμα 1 δείχνει τη λήψη μεγέθους οθόνης και την εφαρμογή breakpoints για επιλογή αριθμού στηλών.

int getColumnCount(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width > 900) return 3;
  if (width > 600) return 2;
  return 1;
}

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

Παράδειγμα 2 — χρήση του MediaQuery με viewPadding για σωστή τοποθέτηση περιεχομένου με λήψη υπόψη περιθωρίων συστήματος.

Widget build(BuildContext context) {
  final padding = MediaQuery.of(context).padding;

  return Padding(
    padding: EdgeInsets.only(
      top: padding.top,
      left: padding.left,
      right: padding.right,
    ),
    child: const MyContent(),
  );
}

Σε αυτό το παράδειγμα, το padding τυλίγει το περιεχόμενο σε Padding, χρησιμοποιώντας περιθώρια συστήματος. Το top λαμβάνει υπόψη τη γραμμή κατάστασης και το notch, left/right — ασφαλείς ζώνες. Το bottom δεν περιλαμβάνεται γιατί το Scaffold συνήθως χειρίζεται μόνο του την κάτω πλοήγηση.

Παράδειγμα 3 — προσδιορισμός προσανατολισμού και αλλαγή διάταξης στοιχείων.

Widget build(BuildContext context) {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return isPortrait
      ? const Column(
          children: [HeaderBanner(), ContentList()],
        )
      : const Row(
          children: [HeaderBanner(), ContentList()],
        );
}

Σε κατακόρυφη λειτουργία τα στοιχεία είναι τοποθετημένα κάθετα (Column), σε οριζόντια — οριζόντια (Row). Αυτή η προσέγγιση παρέχει την καλύτερη χρήση χώρου κατά την περιστροφή της συσκευής.

Συμπέρασμα: MediaQuery — το κύριο εργαλείο για την κατασκευή προσαρμοστικών διατάξεων. Πάντα να λαμβάνετε υπόψη τα περιθώρια συστήματος, breakpoints και προσανατολισμό κατά την ανάπτυξη διεπαφών Flutter.

Συνήθη λάθη κατά την εργασία με το MediaQuery

Λάθος 1: κλήση του MediaQuery.of(context) εκτός περιβάλλοντος όπου έχει οριστεί το MediaQuery. Αν το widget βρίσκεται πάνω από το MediaQuery στο δέντρο, η κλήση οδηγεί σε σφάλμα χρόνου εκτέλεσης. Λύση: καλείτε πάντα το MediaQuery.of(context) εντός widget τυλιγμένων σε MaterialApp ή CupertinoApp, όπου το MediaQuery έχει οριστεί ως ριζικό widget.

Λάθος 2: λήθη του safe area. Οι προγραμματιστές χρησιμοποιούν το MediaQuery.size για τοποθέτηση στοιχείων χωρίς να λαμβάνουν υπόψη τα περιθώρια συστήματος. Σε συσκευές με notch ή gesture navigation, το περιεχόμενο καταλήγει κάτω από τη γραμμή κατάστασης. Λύση: αφαιρέστε το MediaQuery.of(context).padding από τις συντεταγμένες τοποθέτησης.

Λάθος 3: άκαμπτη προσκόλληση σε μεγέθη. Η χρήση του MediaQuery.of(context).size.width για τον καθορισμό ακριβών μεγεθών στοιχείων (width: size.width * 0.3) λειτουργεί μόνο σε συσκευές ενός παράγοντα μορφής. Σε επιτραπέζιο ή tablet η διάταξη φαίνεται αφύσικη. Λύση: χρησιμοποιήστε breakpoints σε συνδυασμό με Expanded και Flexible για ευέλικτη διάταξη, όχι άκαμπτα ποσοστά.

Λάθος 4: αγνόηση του textScaleFactor. Όταν ο χρήστης αυξάνει τη γραμματοσειρά συστήματος, η διεπαφή μπορεί να σπάσει — τα κείμενα βγαίνουν εκτός ορίων δοχείων. Λύση: ελέγξτε το MediaQuery.of(context).textScaleFactor και σε τιμές άνω του 1.3 μεταβείτε σε απλούστερη διάταξη με κύλιση.

Συμπέρασμα: MediaQuery — ισχυρό αλλά λεπτό εργαλείο. Λάβετε υπόψη τα περιθώρια συστήματος, τον προσανατολισμό και τις ρυθμίσεις προσβασιμότητας για να εμφανίζεται σωστά η διεπαφή σε όλες τις συσκευές.