MaterialApp — τι είναι, διαμόρφωση και ρόλος του βασικού widget

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

MaterialApp — είναι ένα widget-περιτύλιγμα που αρχικοποιεί το Material Design σε μια εφαρμογή Flutter. Είναι η ρίζα του Widget Tree και παρέχει στα θυγατρικά widget πρόσβαση σε υπηρεσίες συστήματος: πλοήγηση, θέμα, ερωτήματα πολυμέσων και τοπική προσαρμογή. Χωρίς MaterialApp, η εφαρμογή δεν θα έχει τυπικό στυλ Material και δεν θα μπορεί να χρησιμοποιήσει widget όπως Scaffold, AppBar, FloatingActionButton και BottomNavigationBar.

Τι προσθέτει το MaterialApp στο Widget Tree

Κατά τη χρήση του MaterialApp, το Flutter προσθέτει αυτόματα πολλά βασικά widget στη ρίζα του δέντρου: Navigator (στοίβα οθονών για πλοήγηση), Theme (χρωματικό σχήμα και στυλ), MediaQuery (πληροφορίες συσκευής), Localizations (τοπικοποιημένες συμβολοσειρές), Directionality (κατεύθυνση κειμένου). Αυτά τα widget υλοποιούνται ως InheritedWidget και είναι προσβάσιμα μέσω του BuildContext οπουδήποτε στην εφαρμογή.

Βασική χρήση

Η ελάχιστη διαμόρφωση του MaterialApp απαιτεί μόνο την παράμετρο home — το widget που εμφανίζεται στην κύρια οθόνη. Το Flutter τυλίγει αυτόματα το home σε Scaffold, αν δεν είναι Scaffold, μέσω του μηχανισμού WidgetsBinding. Κατά την εκκίνηση της εφαρμογής με runApp(MaterialApp(home: MyHomePage())), το Flutter δημιουργεί το ριζικό Widget Tree με το MaterialApp ως ρίζα.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

Σε αυτό το παράδειγμα, το MaterialApp διαμορφώνει ένα βασικό θέμα (ανοιχτό και σκούρο), τίτλο και κύρια οθόνη. Η παράμετρος title χρησιμοποιείται για τον τίτλο παραθύρου (σε επιτραπέζιο) και για προσβασιμότητα. Οι παράμετροι theme και darkTheme καθορίζουν την εμφάνιση της εφαρμογής σε διαφορετικές λειτουργίες.

Δομή και παράμετροι του MaterialApp

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

Κύριες παράμετροι διαμόρφωσης

Η παράμετρος title ορίζει το όνομα της εφαρμογής για τον τίτλο παραθύρου και την προσβασιμότητα. Η color καθορίζει το χρώμα της εφαρμογής για τον εναλλάκτη εργασιών στο Android. Η debugShowCheckedModeBanner κρύβει το banner λειτουργίας εντοπισμού σφαλμάτων στην έκδοση κυκλοφορίας. Η showPerformanceOverlay ενεργοποιεί την επικάλυψη με πληροφορίες απόδοσης. Η supportDarkTheme υποδεικνύει αν η εφαρμογή υποστηρίζει σκούρο θέμα.

Παράμετροι για συγκεκριμένες πλατφόρμες

MaterialApp παρέχει παραμέτρους για τη διαμόρφωση συμπεριφοράς σε διαφορετικές πλατφόρμες: restorationScopeId για αποθήκευση της κατάστασης εφαρμογής κατά την επανεκκίνηση στο Android, scrollBehavior για τη διαμόρφωση συμπεριφοράς κύλισης σε διαφορετικά λειτουργικά συστήματα, useMaterial3 για ενεργοποίηση του Material 3 (Material You). Το Material 3 προσθέτει δυναμικά χρώματα, νέα στοιχεία και ενημερωμένα στυλ.

Θεματοποίηση μέσω theme και darkTheme

Θεματοποίηση — μία από τις κύριες παραμέτρους του MaterialApp. Η παράμετρος theme δέχεται ένα αντικείμενο ThemeData που καθορίζει την παλέτα χρωμάτων, την τυπογραφία, τα σχήματα στοιχείων και την εικονογραφία για το ανοιχτό θέμα. Η παράμετρος darkTheme — ανάλογη διαμόρφωση για το σκούρο θέμα. Το Flutter αλλάζει αυτόματα θέμα ανάλογα με τις ρυθμίσεις συστήματος της συσκευής.

ThemeData: χρωματικό σχήμα

ThemeData περιλαμβάνει primarySwatch (κύριο χρώμα), colorScheme (εκτεταμένο χρωματικό σχήμα Material 3), brightness (ανοιχτό ή σκούρο), fontFamily (προεπιλεγμένη γραμματοσειρά), textTheme (στυλ κειμένου), cardTheme, appBarTheme, buttonTheme και δεκάδες άλλες παραμέτρους για τη διαμόρφωση συγκεκριμένων στοιχείων. Χρησιμοποιήστε το colorScheme για Material 3 και το primarySwatch για Material 2.

Δυναμικά χρώματα Material 3

Το Material 3 (Material You) υποστηρίζει δυναμικά χρώματα, τα οποία εξάγονται από την ταπετσαρία της συσκευής σε Android 12+. Για ενεργοποίηση, ορίστε useMaterial3: true και χρησιμοποιήστε το colorScheme.fromSeed ή το colorScheme.fromImageProvider. Τα δυναμικά χρώματα δημιουργούν αυτόματα μια αρμονική παλέτα από 5 τόνους: primary, secondary, tertiary, neutral και neutralVariant.

Πρόσβαση στο θέμα σε widget

Οποιοδήποτε widget μπορεί να αποκτήσει πρόσβαση στο τρέχον θέμα μέσω Theme.of(context). Το Theme.of επιστρέφει ThemeData, από το οποίο μπορούν να ληφθούν colors, textTheme και άλλες παράμετροι. Για εγγραφή σε αλλαγές θέματος (π.χ. κατά την εναλλαγή μεταξύ ανοιχτού και σκούρου), χρησιμοποιήστε το πλαίσιο μέσα στη μέθοδο build — το Flutter ανακατασκευάζει αυτόματα το widget όταν αλλάζει το θέμα.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Παράδειγμα θεματοποιημένου κειμένου",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

Σε αυτό το παράδειγμα, το Theme.of(context) λαμβάνει το τρέχον θέμα από το πλησιέστερο MaterialApp. Το χρώμα φόντου και το στυλ κειμένου αντιστοιχούν αυτόματα στο τρέχον θέμα (ανοιχτό ή σκούρο). Κατά την εναλλαγή θέματος, το Container και το Text ανακατασκευάζονται με νέες τιμές από το ενημερωμένο ThemeData.

Δρομολόγηση και πλοήγηση στο MaterialApp

MaterialApp ενσωματώνει τον Navigator — έναν πλοηγό στοίβας που διαχειρίζεται τις μεταβάσεις μεταξύ οθονών. Οι παράμετροι initialRoute, routes και onGenerateRoute καθορίζουν πώς το Flutter χειρίζεται την πλοήγηση. Τα Navigator.push και Navigator.pushReplacement επιτρέπουν προγραμματική εναλλαγή οθονών, και το Navigator.pop — επιστροφή στην προηγούμενη οθόνη.

Ονομασμένες διαδρομές (routes)

Η παράμετρος routes δέχεται Map, όπου το κλειδί είναι το όνομα της διαδρομής (συμβολοσειρά) και η τιμή είναι μια συνάρτηση που δημιουργεί το widget για την οθόνη. Οι ονομασμένες διαδρομές είναι βολικές για στατική πλοήγηση: '/' (ριζική διαδρομή) συνήθως αντιστοιχεί στο home, '/settings', '/profile' — άλλες οθόνες. Το Navigator.pushNamed(context, '/settings') πλοηγείται στην οθόνη ρυθμίσεων.

Δημιουργία διαδρομών (onGenerateRoute)

onGenerateRoute — είναι μια συνάρτηση που καλείται όταν η διαδρομή δεν βρίσκεται στις routes. Δέχεται RouteSettings και επιστρέφει MaterialPageRoute. Αυτή η προσέγγιση είναι χρήσιμη για δυναμική πλοήγηση, όταν οι διαδρομές εξαρτώνται από δεδομένα (π.χ. /user/42). Το onGenerateRoute αναλύει το όνομα της διαδρομής, εξάγει παραμέτρους και δημιουργεί την αντίστοιχη οθόνη.

Βαθιά links και named routing

Για υποστήριξη βαθιών links (deep links), χρησιμοποιήστε μαζί τις παραμέτρους onGenerateInitialRoute και onGenerateRoute. Τα βαθιά links επιτρέπουν το άνοιγμα μιας συγκεκριμένης οθόνης εφαρμογής μέσω URL (π.χ. https://example.com/promo). Το Flutter χειρίζεται τα βαθιά links στο Android (μέσω intent filters) και στο iOS (μέσω universal links) και μεταβιβάζει τη διαδρομή στο onGenerateRoute.

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

Σε αυτό το παράδειγμα, το onGenerateRoute χειρίζεται δυναμικές διαδρομές μορφής /user/42. Εάν η διαδρομή δεν βρεθεί στις στατικές routes και δεν ταιριάζει με το δυναμικό μοτίβο, το Flutter εμφανίζει μια σελίδα σφάλματος που μπορεί να διαμορφωθεί μέσω του onUnknownRoute.

Τοπική προσαρμογή και διεθνοποίηση

MaterialApp παρέχει ενσωματωμένη υποστήριξη για τοπική προσαρμογή μέσω των παραμέτρων localizationsDelegates και supportedLocales. Οι LocalizationsDelegates φορτώνουν τοπικοποιημένες συμβολοσειρές, και το supportedLocales καθορίζει ποιες γλώσσες υποστηρίζει η εφαρμογή. Το Flutter ανιχνεύει αυτόματα τη γλώσσα της συσκευής και φορτώνει τους αντίστοιχους τοπικοποιημένους πόρους.

Διαμόρφωση supportedLocales και localizationsDelegates

Η παράμετρος supportedLocales δέχεται μια λίστα Locale που υποστηρίζει η εφαρμογή: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates — λίστα αντιπροσώπων που φορτώνουν τοπικοποιημένες συμβολοσειρές. Για Material Design, προσθέστε GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate και GlobalCupertinoLocalizations.delegate.

Τοπική προσαρμογή συμβολοσειρών εφαρμογής

Για τοπική προσαρμογή των δικών σας συμβολοσειρών, χρησιμοποιήστε την κλάση AppLocalizations που δημιουργείται μέσω flutter_localizations ή του πακέτου intl. Η AppLocalizations παρέχει στατικές μεθόδους για πρόσβαση σε τοπικοποιημένες συμβολοσειρές: AppLocalizations.of(context)!.helloMessage. Το MaterialApp μεταβιβάζει αυτόματα τα Localizations στο Widget Tree, καθιστώντας τα προσβάσιμα μέσω περιβάλλοντος.

• flutter_localizations — το επίσημο πακέτο για τοπική προσαρμογή widget Material και συμβολοσειρών συστήματος.
• intl — πακέτο για διεθνοποίηση: μορφοποίηση αριθμών, ημερομηνιών, νομισμάτων και πληθυντικός.
• Αρχεία ARB — μορφή αποθήκευσης τοπικοποιημένων συμβολοσειρών που χρησιμοποιείται από τα flutter_localizations και intl.

MaterialApp vs CupertinoApp vs WidgetsApp

Το Flutter παρέχει τρία βασικά widget για διαφορετικές πλατφόρμες: MaterialApp (Material Design για Android και web), CupertinoApp (στυλ iOS) και WidgetsApp (βασικό widget χωρίς στυλ). Η επιλογή του βασικού widget καθορίζει την εμφάνιση ολόκληρης της εφαρμογής και τη διαθεσιμότητα στοιχείων πλατφόρμας.

MaterialApp: καθολική επιλογή

MaterialApp είναι κατάλληλο για τις περισσότερες εφαρμογές χάρη στην υποστήριξη Material Design, που φαίνεται καλό σε Android, web και επιτραπέζιο. Το Material Design παρέχει μια πλούσια βιβλιοθήκη στοιχείων: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog και πολλά άλλα. Το MaterialApp υποστηρίζει επίσης Material 3 με δυναμικά χρώματα.

CupertinoApp: στυλ iOS

CupertinoApp χρησιμοποιεί Cupertino Design σύμφωνα με τις Human Interface Guidelines της Apple. Παρέχει CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar και άλλα στυλιζαρισμένα στοιχεία iOS. Χρησιμοποιήστε CupertinoApp για εφαρμογές iOS ή εφαρμογές που ακολουθούν το στυλ Apple σε όλες τις πλατφόρμες.

WidgetsApp: ελάχιστη ρίζα

WidgetsApp — είναι ένα βασικό ριζικό widget χωρίς στυλ. Προσθέτει Navigator, MediaQuery και Localizations, αλλά δεν παρέχει θέματα ή στοιχεία Material/Cupertino. Το WidgetsApp είναι κατάλληλο για προσαρμοσμένα συστήματα σχεδίασης, παιχνίδια ή εφαρμογές με δικό τους στυλ, όπου το Material ή το Cupertino είναι περιττό.