AppBar — τι είναι, ρύθμιση και widgets Flutter

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

AppBar — είναι ένα τυπικό στοιχείο Material του επάνω πίνακα που εμφανίζεται στο επάνω μέρος του Scaffold. Περιέχει τον τίτλο οθόνης, το κουμπί πλοήγησης (συνήθως εικονίδιο χάμπουργκερ ή βέλος "Πίσω") και ενέργειες — εικονίδια που ανοίγουν αναζήτηση, ρυθμίσεις ή άλλες λειτουργίες. Το AppBar προσαρμόζεται αυτόματα στην πλατφόρμα: στο Android χρησιμοποιείται τυπικό Material bottom-shadow, στο iOS — πιο επίπεδο σχέδιο με διαφάνεια.

Το AppBar υλοποιεί τη διεπαφή PreferredSizeWidget, που σημαίνει ότι το ύψος του είναι σταθερό και γνωστό πριν την κατασκευή. Από προεπιλογή, το ύψος του AppBar είναι 56dp σε Android και 44dp σε iOS σε κατακόρυφο προσανατολισμό, λαμβάνοντας υπόψη το SafeArea στο επάνω μέρος. Αυτό το χαρακτηριστικό επιτρέπει στο Scaffold να υπολογίζει εκ των προτέρων τον διαθέσιμο χώρο για το body, αποφεύγοντας την ανασύνθεση κατά την απόδοση.

Σύμφωνα με Flutter Material Library Guide (2026), το AppBar έχει περάσει από πολλές επαναλήψεις: στο Flutter 1.x ήταν ένα απλό δοχείο με κείμενο, στο Flutter 2.x έλαβε υποστήριξη για Material 3 και flexibleSpace, και στο Flutter 3.x — ενσωμάτωση με System UI (χρώμα γραμμής κατάστασης, διαφάνεια). Το σύγχρονο AppBar υποστηρίζει Dynamic Color από το Material You σε συσκευές Android 12+.

Δομή AppBar: ιδιότητες και παράμετροι

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

Title και leading: ρύθμιση τίτλου και πλοήγησης

Η ιδιότητα title δέχεται οποιοδήποτε widget, αλλά πιο συχνά χρησιμοποιείται Text με ρύθμιση στυλ μέσω TextStyle. Για μεγάλους τίτλους, συνιστάται να τυλίγετε το title σε Flexible ώστε το κείμενο να περικόπτεται σωστά όταν δεν υπάρχει χώρος. Η ιδιότητα leading αντικαθίσταται αυτόματα με BackButton κατά τη μετάβαση σε ένθετη οθόνη μέσω Navigator.push, αν δεν έχει οριστεί ρητά.

Actions: τοποθέτηση εικονιδίων ενεργειών

Η λίστα actions περιέχει widget στοιχισμένα στη δεξιά άκρη του AppBar. Κάθε στοιχείο δεν πρέπει να είναι πλατύτερο από 48dp (πρότυπο Material Design). Για ομαδοποίηση ενεργειών, χρησιμοποιήστε PopupMenuButton — αυτό κρύβει λιγότερο σημαντικές επιλογές σε αναπτυσσόμενο μενού και ακολουθεί τις συστάσεις Material για πυκνότητα διεπαφής.

Προσαρμογή AppBar: στυλ, χρώματα και συμπεριφορά

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

Το χρώμα φόντου του AppBar ορίζεται μέσω backgroundColor. Εάν δεν προσδιορίζεται, χρησιμοποιείται appBarTheme από ThemeData. Στο Material 3, το χρώμα του AppBar υπολογίζεται αυτόματα από ColorScheme.primary, αλλά μπορεί να αντικατασταθεί για συγκεκριμένη οθόνη. Για διαφανές AppBar (συχνά χρησιμοποιείται σε προφίλ), ορίστε backgroundColor: Colors.transparent με elevation: 0.

Η ιδιότητα elevation ελέγχει τη σκιά κάτω από το AppBar. Η τιμή 0 αφαιρεί τη σκιά, δημιουργώντας εφέ "επίπεδου" πίνακα, που είναι σχετικό για Material 3. Η τιμή 4 δίνει τυπική σκιά Material Design. Για προσαρμοσμένο έλεγχο σκιάς, χρησιμοποιήστε shadowColor — το χρώμα σκιάς που διαχωρίζει οπτικά τον πίνακα από το περιεχόμενο.

Για έλεγχο χρώματος κειμένου στο AppBar, χρησιμοποιήστε foregroundColor. Αυτή η ιδιότητα επηρεάζει το χρώμα του τίτλου, των εικονιδίων και του κειμένου σε actions. Κατά την αλλαγή backgroundColor, επιλέγεται αυτόματα αντίθετο foregroundColor, αλλά μπορεί να οριστεί υποχρεωτικά για μη τυπικά σχέδια.

SliverAppBar: κινούμενη έκδοση του AppBar

SliverAppBar — είναι επέκταση του AppBar για χρήση εντός CustomScrollView, που υποστηρίζει κινούμενα σχέδια κατά την κύλιση: σύμπτυξη (collapsing), εφέ παράλλαξης και καρφίτσωμα (pinned). Σε αντίθεση με το τυπικό AppBar, το SliverAppBar είναι widget sliver και μπορεί να αλλάζει δυναμικά μέγεθος ανάλογα με τη θέση κύλισης.

Οι κύριες λειτουργίες του SliverAppBar καθορίζονται από τον συνδυασμό ιδιοτήτων pinned, floating και snap. Στη λειτουργία pinned, ο πίνακας παραμένει πάντα ορατός στο επάνω μέρος της οθόνης. Στη λειτουργία floating, εμφανίζεται κατά την κύλιση προς τα πίσω. Ο συνδυασμός floating + snap δημιουργεί συμπεριφορά "κολλώδους" πίνακα που εμφανίζεται με την παραμικρή κύλιση προς τα πάνω, που χρησιμοποιείται συχνά σε ροές ειδήσεων.

Σύμφωνα με Flutter API SliverAppBar (2026), για να χρησιμοποιήσετε SliverAppBar, πρέπει να αντικαταστήσετε το συνηθισμένο ListView ή Column με CustomScrollView με sliver widgets. Το Scaffold συνεχίζει να λειτουργεί σωστά, αλλά η ιδιότητα appBar του Scaffold πρέπει να είναι null — το SliverAppBar τοποθετείται εντός CustomScrollView ως πρώτο sliver.

Παράδειγμα ρύθμισης AppBar σε εφαρμογή

Ας εξετάσουμε ένα παράδειγμα AppBar με αναζήτηση, αναπτυσσόμενο μενού και TabBar. Αυτός ο κώδικας δείχνει μια τυπική διαμόρφωση του επάνω πίνακα σε μια εφαρμογή Flutter παραγωγής.

Scaffold(
  appBar: AppBar(
    title: const Text('Κατάλογος'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Ρυθμίσεις')),
          const PopupMenuItem(value: 'about', child: Text('Σχετικά με την εφαρμογή')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Στο παράδειγμα, το AppBar περιέχει έναν κεντραρισμένο τίτλο, κουμπί ανοίγματος Drawer αριστερά, εικονίδιο αναζήτησης και αναπτυσσόμενο μενού δεξιά. Το TabBar στο bottom επιτρέπει εναλλαγή μεταξύ κατηγοριών προϊόντων. Αυτή η διαμόρφωση καλύπτει τα περισσότερα σενάρια εφαρμογών κινητού: πλοήγηση, αναζήτηση, πρόσθετες επιλογές και εναλλαγή ενοτήτων — όλα σε ένα επάνω πάνελ.