Scaffold: τι είναι, δομή και widget Flutter

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

Scaffold — είναι ένα widget-συνθέτης από τη βιβλιοθήκη Material Design που δημιουργεί τη βασική οπτική δομή της οθόνης. Υλοποιεί το πρότυπο τυπικής εφαρμογής Material: άνω πανέλ, σώμα οθόνης, πλευρικό μενού και πλευτά κουμπιά. Σε αντίθεση με το Container που απλώς ορίζει διαστάσεις και στυλ, το Scaffold διαχειρίζεται ολόκληρη την οθόνη ως ένα ενιαίο σύστημα.

Κάθε εφαρμογή Flutter που έχει κατασκευαστεί σύμφωνα με Material Design ξεκινάει με MaterialApp, μέσα στο οποίο κάθε οθόνη περιβάλλεται σε ένα Scaffold. Ακριβώς το Scaffold εξασφαλίζει τη σωστή εμφάνιση του AppBar σε όλες τις συσκευές, λαμβάνοντας υπόψη το SafeArea για iPhone X και νεότερα. Είναι επίσης υπεύθυνο για τη σειρά z: το Drawer εμφανίζεται πάνω από το body και το SnackBar — πάνω από ολόκληρο το πρόγραμμα αλλά κάτω από τα παράθυρα διαλόγου.

Σύμφωνα με το επίσημο Flutter API Reference (2026), το Scaffold είναι υποχρεωτική προϋπόθεση για τη σωστή λειτουργία widget όπως SnackBar, BottomSheet και PersistentBottomSheet. Χωρίς Scaffold, αυτά τα στοιχεία πέτουν εξαίρεση επειδή εξαρτώνται από το InheritedWidget Scaffold.of για πρόσβαση στο περιεχόμενο Scaffold. Για αυτό η τοποθέτηση οποιουδήποτε περιεχομένου απευθείας σε Container αντί για Scaffold είναι συνηθισμένο λάθος αρχάριων προγραματιστών που οδηγεί σε απώλεια λειτουργικότητας Material.

Το Scaffold στην ιεραρχία widget

Σε μια τυπική εφαρμογή Flutter, το Scaffold βρίσκεται μέσα στο MaterialApp, συνήθως κάτω από το WidgetsApp ή CupertinoApp στην επαυζημενωματική ανάπτυξη. Το MaterialApp δημιουργεί Navigator και θέμα, και το Scaffold καθορίζει τη δομή της τρέχουσας οθόνης. Κάθε οθόνη μπορεί να έχει το δικό της Scaffold με μοναδικά AppBar, Drawer και BottomNavigationBar, επιτρέποντας ευέλικτη προσαρμογή της διεπαφής για μια συγκεκριμένη σελίδα.

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

Δομή Scaffold: βασικά μέρη του πλαισίου

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

AppBar — άνω πανέλ

AppBar — το άνω πανέλ της οθόνης που εμφανίζει τον τίτλο, κουμπί πλοήγησης και ενέργειες. Λαμβάνει αυτόματα σωστό ύψος 56dp και λαμβάνει υπόψη το SafeArea για συσκευές με εγκοπή. Στο AppBar μπορεί να ενσωματωθεί TabBar για εναλλαγή καρτελών χρησιμοποιώντας την ιδιότητα bottom.

Drawer — πλευρικό μενού

Drawer — ένα πανέλ που εξέρχεται από αριστερά και παρέχει πλοήγηση στις ενότητες της εφαρμογής. Το Scaffold προσθέτει αυτόματα το εικονίδιο χάμπουργκερ στο AppBar εάν η ιδιότητα drawer έχει οριστεί. Το Drawer μπορεί να περιέχει DrawerHeader, ListView με στοιχεία μενού και πληροφορίες χρήστη.

BottomNavigationBar — κάτω πλοήγηση

BottomNavigationBar — πανέλ στο κάτω μέρος της οθόνης για εναλλαγή μεταξύ βασικών ενοτήτων. Περιέχει 2 έως 5 εικονίδια με ετικέτες και υποστηρίζει Material 3 με ενεργή ένδειξη μέσω NavigationBar. Το Scaffold το τοποθετεί στο κάτω μέρος της οθόνης, μετακινώντας αυτόματα το body προς τα πάνω για να μην καλύπτεται το περιεχόμενο.

FloatingActionButton — πλευτή κουμπί

FloatingActionButton — ένα στρογγυλό κουμπί που τοποθετείται στη κάτω δεξιά γωνία της οθόνης. Χρησιμοποιείται για την κύρια ενέργεια στην οθόνη, για παράδειγμα, προσθήκη νέας εγγραφής ή αποστολή μηνύματος. Το Scaffold υποστηρίζει πολλά FAB με επεκταμένη προσωμίωση μέσω των extended ιδιοτήτων.

Body — κύριο περιεχόμενο

Body — η κεντρική περιοχή της οθόνης όπου τοποθετείται το κύριο περιεχόμενο. Ως body μπορεί να είναι οποιοδήποτε widget: Column, ListView, GridView, Stack ή μια προσαρμοσμένη σύνθεση. Το Scaffold υπολογίζει αυτόματα το ύψος του body λαμβάνοντας υπόψη AppBar, BottomNavigationBar και SafeArea, εξαλείφοντας την ανάγκη χειροκίνητης ρύθμισης μεγεθών.

Βασικές ιδιότητες Scaffold

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

Η ιδιότητα resizeToAvoidBottomInset είναι ιδιαίτερα σημαντική για την εργασία με φόρμες: όταν είναι true (προεπιλογή), το Scaffold συμπιέζει αυτόματα το body όταν εμφανίζεται πληκτρολόγιο για να παραμείνει ορατό το πεδίο εισαγωγής. Αυτό εξαλείφει την ανάγκη να γράψετε προσαρμοσμένους ακροατές πληκτρολογίου. Για προσαρμοσμένα σενάρια με SingleChildScrollView, η ιδιότητα μπορεί να απενεργοποιηθεί.

Παράδειγμα χρήσης Scaffold σε εφαρμογή

Ας εξετάσουμε ένα πρακτικό παράδειγμα Scaffold με πλήρη σετ στοιχείων Material. Ο κώδικας δημιουργεί μια οθόνη με AppBar, Drawer, BottomNavigationBar, FloatingActionButton και SnackBar — τυπική δομή μιας κινητής εφαρμογής στο Flutter.

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Η Εφαρμογή Μου'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Μενού')),
            ListTile(title: const Text('Ρυθμίσεις'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Η ενέργεια ολοκληρώθηκε')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Στο παράδειγμα χρησιμοποιείται NavigationBar από Material 3 αντί για το απαρχαιωμένο BottomNavigationBar. Το Scaffold συνδέει αυτόματα όλα τα μέρη: κατά το άνοιγμα του Drawer το SnackBar κρύβεται, κατά την εναλλαγή καρτελών το body ενημερώνεται, και το FloatingActionButton παραμένει στη θέση του. Το ScaffoldMessenger εγγυάται την εμφάνιση του SnackBar ακόμη και με πολλά Scaffold στην ιεραρχία.

Scaffold και Material 3: χαρακτηριστικά ρύθμισης

Material 3 (M3) — είναι η εξέλιξη του Material Design, που παρουσιάστηκε από την Google το 2023. Το Scaffold στο M3 έλαβε μια σειρά αλλαγών: νέο NavigationBar widget αντί για BottomNavigationBar, υποστήριξη Dynamic Color μέσω ColorScheme.fromSeed και ενημερωμένες συστάσεις για αποστάσεις και ύψη στοιχείων. Η μετάβαση σε M3 δεν απαιτεί αντικατάσταση του Scaffold — αρκεί να ενημερώσετε το θέμα της εφαρμογής.

Για την ενεργοποίηση Material 3 στο έργο, πρέπει να ορίσετε useMaterial3: true στο ThemeData. Το Scaffold προσαρμόζει αυτόματα την οπτική εμφάνιση: οι αποστάσεις γίνονται μεγαλύτερες (24dp αντί 16dp), τα χρώματα υπολογίζονται ξανά από το seed χρώμα, και το FloatingActionButton λαμβάνει μεγαλύτερες διαστάσεις με στρογγυλεσμένες γωνίες. Παράλληλα, όλες οι υπάρχουσες ιδιότητες του Scaffold παραμένουν λειτουργικές.

Σύμφωνα με την Material Design 3 Specification (2026), συνιστάται η χρήση NavigationBar με τρία έως πέντε στοιχεία αντί για BottomNavigationBar. Το Scaffold υποστηρίζει και τις δύο εκδοχές, αλλά το NavigationBar παρέχει καλύτερη υποστήριξη για προσαρμοστικότητα και Material You σε συσκευές Pixel.

Ρύθμιση Scaffold για Material 3

Για σωστή λειτουργία του Scaffold με M3, αρκεί να ενημερώσετε το θέμα και να αντικαταστήσετε το BottomNavigationBar με NavigationBar. Τα χρώματα θα υπολογιστούν αυτόματα μέσω ColorScheme.fromSeed, και το Scaffold θα προσαρμόσει τις αποστάσεις στα νέα πρότυπα. Αν χρειαστεί, μπορείτε να παρακάμψετε το backgroundColor απευθείας.