Flutter στην ανάπτυξη κινητών: τι είναι, βασικές έννοιες και πώς λειτουργεί

Flutter: βασικά στοιχεία των Widget, StatelessWidget και StatefulWidget

Widget — μια δηλωτική περιγραφή ενός μέρους του UI. Τα πάντα στο Flutter είναι Widget: από ένα κουμπί μέχρι την ίδια την εφαρμογή. Ένα Widget είναι διαμόρφωση (όχι το ίδιο το UI). StatelessWidget — ένα αμετάβλητο Widget. Η build() καλείται μία φορά. Δεν έχει κατάσταση. Χρησιμοποιείται για στατικό περιεχόμενο. StatefulWidget — ένα μεταβλητό Widget. Έχει ένα αντικείμενο State που μπορεί να αλλάξει. setState() — ενεργοποιεί την ανακατασκευή. State — ένα μεταβλητό αντικείμενο συνδεδεμένο με ένα StatefulWidget. Περιέχει δεδομένα που μπορούν να αλλάξουν.

StatelessWidget vs StatefulWidget

StatelessWidget — η build() καλείται μία φορά. Κατάλληλο για κεφαλίδες, εικονίδια, στατικά κείμενα. StatefulWidget — η build() καλείται κάθε φορά που καλείται η setState(). Κατάλληλο για φόρμες, λίστες με αλλαγές, χρονοδιακόπτες. InheritedWidget — μεταβίβαση δεδομένων προς τα κάτω χωρίς ρητή μεταβίβαση μέσω κατασκευαστών. Theme, MediaQuery, Navigator — InheritedWidget. BuildContext — θέση ενός Widget στο δέντρο. context.of<T>, context.watch<T>, context.select<T,R> — πρόσβαση σε InheritedWidget.

// Παράδειγμα Flutter Widget: StatefulWidget με setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — διαμόρφωση. StatelessWidget — αμετάβλητο. StatefulWidget — μεταβλητό με setState(). Η IT Sectr συνιστά να ξεκινάτε με StatelessWidget και να μεταβαίνετε σε StatefulWidget μόνο όταν χρειάζεστε κατάσταση.

Δέντρα (Widget Tree, Element Tree, RenderObject Tree)

Το Flutter χρησιμοποιεί τρία δέντρα για αποδοτική απόδοση. Widget Tree — δέντρο διαμόρφωσης. Τα Widget δημιουργούνται συχνά (κάθε build), ελαφριά. Element Tree — δέντρο στοιχείων. Ένα στοιχείο ανά Widget (αν ο τύπος δεν αλλάξει). Element — γέφυρα μεταξύ Widget και RenderObject. RenderObject Tree — δέντρο απόδοσης. Διαχειρίζεται μεγέθη, θέσεις, σχέδιο. RenderObject — βαρύ, δημιουργείται σπάνια. Το Flutter συγκρίνει το Widget Tree και ενημερώνει το Element Tree, το οποίο ενεργοποιεί την ενημέρωση του RenderObject Tree.

Keys και Element Tree

Key — αναγνωριστικό Widget στο Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Τα Keys επιτρέπουν στο Flutter να αντιστοιχίζει παλιά και νέα Widget κατά την ανακατασκευή. Χωρίς Keys, το Flutter αντιστοιχίζει ανά τύπο Widget και θέση. GlobalKey — πρόσβαση σε State από άλλο Widget. Χρησιμοποιείται για: σύνθετες φόρμες, κινούμενα σχέδια, πρόσβαση σε State σε δοκιμές. Η IT Sectr συνιστά τη χρήση Keys για λίστες (List.generate) και την αποφυγή GlobalKey εκτός αν είναι απαραίτητο.

Expanded — Widget που γεμίζει τον διαθέσιμο χώρο σε Row/Column/Flex. Flexible — δεν αναγκάζει σε γέμισμα (μπορεί να είναι μικρότερο). MediaQuery — InheritedWidget με πληροφορίες συσκευής: μέγεθος οθόνης, προσανατολισμός, πλατφόρμα, συντελεστής κλίμακας κειμένου. Theme/ThemeData — κεντρικοποιημένο θέμα. Theme.of(context) — πρόσβαση. MaterialApp — ριζικό Widget για διαμόρφωση δρομολόγησης, θεμάτων, τοπικών ρυθμίσεων. Scaffold — βασική διάταξη με AppBar, Drawer, BottomNavigationBar. AppBar — επάνω πλαίσιο.

Πλοήγηση (Navigator, Route)

Navigator — στοίβα διαδρομών (Routes). Navigator.push — άνοιγμα οθόνης (επιστρέφει Future). Navigator.pop — κλείσιμο (με αποτέλεσμα). MaterialPageRoute — κινούμενη μετάβαση (ολίσθηση από δεξιά). Named Routes — αναγνωριστικά συμβολοσειράς. onGenerateRoute — κεντρικοποιημένος χειριστής. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — δηλωτική πλοήγηση για ιστό, deep linking και σύνθετα σενάρια.

Navigator 2.0

Navigator 2.0 — δηλωτική πλοήγηση. Router — κεντρικό Widget. RouteInformationParser — ανάλυση URL. RouterDelegate — διαχείριση στοίβας. GoRouter (πακέτο) — απλοποιημένο περιτύλιγμα πάνω από το Navigator 2.0. Υποστηρίζει: ονομασμένες διαδρομές, παραμέτρους, ανακατεύθυνση, deep linking. Η IT Sectr συνιστά το GoRouter για τα περισσότερα έργα και το Navigator 2.0 μόνο για σύνθετα σενάρια (ιστός, επιτραπέζιος).

Ασύγχρονο (FutureBuilder, StreamBuilder)

FutureBuilder — Widget που χτίζει UI βάσει ενός Future. connectionState: none, waiting, active, done. Χρησιμοποιείται για: αιτήματα HTTP, ανάγνωση ΒΔ, χρονοδιακόπτες. StreamBuilder — Widget για Stream (ατελείωτη ροή δεδομένων). snapshot.data, snapshot.hasError, snapshot.hasData. Χρησιμοποιείται για: WebSocket, Firebase, ενημερώσεις τοποθεσίας. Και τα δύο Widget ανακατασκευάζονται όταν λαμβάνουν νέα δεδομένα.

Διαχείριση κατάστασης

Provider — απλό DI + διαχείριση κατάστασης. ChangeNotifierProvider, MultiProvider. Riverpod — μοντέρνα αντικατάσταση του Provider: ασφαλές σε μεταγλώττιση, ανεξάρτητο από BuildContext. Bloc — αρχιτεκτονική Event-Driven: Cubit (απλά συμβάντα) vs Bloc (σύνθετα). GetX — ελαφριά διαχείριση κατάστασης + DI + δρομολόγηση. setState — το πιο απλό, για τοπική κατάσταση. Η IT Sectr συνιστά το Riverpod για νέα έργα και το Provider για υπάρχοντα.

Θέματα και προσαρμογή (MediaQuery, ThemeData)

MediaQuery — μέγεθος οθόνης, προσανατολισμός, πλατφόρμα, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — θέμα εφαρμογής: χρώματα, γραμματοσειρές, σχήματα. Theme.of(context).textTheme.bodyLarge. Hot Reload — έγχυση κώδικα σε εκτελούμενη εφαρμογή. Διατηρεί την κατάσταση. Δεν υποστηρίζει: αλλαγή main(), καθολικές μεταβλητές, στατικά πεδία. Hot Restart — πλήρης επανεκκίνηση εφαρμογής (απώλεια κατάστασης). Hot Reload — το κύριο πλεονέκτημα του Flutter για προγραμματιστές.

StatelessWidget — για στατικό περιεχόμενο. StatefulWidget — για δυναμικό περιεχόμενο. InheritedWidget — για DI. Η IT Sectr συνιστά από προεπιλογή StatelessWidget και StatefulWidget μόνο όταν χρειάζεται.

Responsive διάταξη

LayoutBuilder — προσαρμογή στις διαστάσεις του γονέα. OrientationBuilder — προσαρμογή στον προσανατολισμό. Expanded vs Flexible — κατανομή χώρου σε Row/Column. MediaQuery — σημεία διακοπής για tablet και επιτραπέζιους υπολογιστές. SafeArea — περιθώρια από στοιχεία συστήματος (notch, γραμμή κατάστασης). AspectRatio — διατήρηση αναλογιών. Η IT Sectr συνιστά LayoutBuilder για προσαρμοστικές διατάξεις και OrientationBuilder για οριζόντιο προσανατολισμό.

Δοκιμές (Widget, Integration, Unit)

Unit tests — δοκιμή επιχειρηματικής λογικής, αποθετηρίων, μοντέλων. dart test — εκτέλεση. Widget tests — δοκιμή widget μεμονωμένα. WidgetTester — pumpWidget, tap, enterText. Integration tests — πλήρη σενάρια σε πραγματική συσκευή/εξομοιωτή. Mockito — προσομοίωση εξαρτήσεων. Golden tests — σύγκριση στιγμιότυπων οθόνης (golden αρχεία). Η IT Sectr συνιστά Widget tests για κάθε οθόνη και Unit tests για επιχειρηματική λογική.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Κινούμενα σχέδια (Εμμεσα, Ρητά, Hero)

Εμμεσα κινούμενα σχέδια — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Οι αλλαγές ιδιοτήτων κινούνται αυτόματα. Ρητά κινούμενα σχέδια — AnimationController με Tween. forward() / reverse(). Hero κινούμενο σχέδιο — Hero Widget με ετικέτα — κινούμενο σχέδιο μετάβασης μεταξύ οθονών. Staggered κινούμενο σχέδιο — αλυσίδα κινούμενων σχεδίων με Interval. Lottie — ενσωμάτωση κινούμενων σχεδίων After Effects. Rive — διαδραστικά κινούμενα σχέδια (state machine). Η IT Sectr συνιστά AnimatedContainer για το 80% των περιπτώσεων και AnimationController για σύνθετα σενάρια.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Δικτύωση (http, dio, graphql)

http — απλό HTTP client (get, post, put, delete). dio — προηγμένο client με παρεμβολείς, χρονικά όρια, επαναλήψεις, καταγραφή. graphql_flutter — GraphQL client για Flutter. json_serializable — δημιουργία fromJson/toJson μέσω σχολιασμών. Retrofit Dart — type-safe HTTP client όπως το Retrofit. WebSocket — μέσω web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. Η IT Sectr συνιστά dio για REST API και graphql_flutter για GraphQL.

Flutter DevTools — σύνολο εργαλείων: Inspector (δέντρο widget), Timeline (απόδοση), Memory, Network, Logging. Profile mode — δημιουργία προφίλ χωρίς εντοπισμό σφαλμάτων. Performance overlay — FPS, χρόνοι build. Flame chart — διάγραμμα φλόγας. DevTools — απαραίτητο εργαλείο για βελτιστοποίηση εφαρμογών Flutter στην παραγωγή.

Flutter Web — μεταγλώττιση Flutter σε WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-perfect, αλλά βαρύτερο. HTML renderer — ελαφρύ, αλλά με περιορισμούς. WASM (Flutter 3.22+) — εγγενής απόδοση. Προσαρμογή responsive μέσω LayoutBuilder και MediaQuery. Η IT Sectr συνιστά CanvasKit για επιτραπέζιες εφαρμογές ιστού και HTML renderer για ιστότοπους περιεχομένου.