Sobes.tech
Middle

Ποια widgets στο Flutter παρέχουν ευέλικτη διάταξη;

sobes.tech AI

Απάντηση από AI

  • MediaQuery - για την απόκτηση πληροφοριών σχετικά με το μέγεθος και την προσανατολισμό της οθόνης.
  • LayoutBuilder - για την κατασκευή widget βάσει των περιορισμών του γονικού στοιχείου.
  • OrientationBuilder - για την κατασκευή widget βάσει της προσανατολισμού της οθόνης.
  • FractionallySizedBox - για τη δημιουργία στοιχείων με μέγεθος αναλογικό του διαθέσιμου χώρου.
  • AspectRatio - για τη διατήρηση μιας συγκεκριμένης αναλογίας διαστάσεων του στοιχείου.
  • Expanded και Flexible - για την ευέλικτη κατανομή χώρου μεταξύ των στοιχείων σε Row ή Column.
  • SingleChildScrollView - για την κύλιση περιεχομένου εάν υπερβαίνει την διαθέσιμη περιοχή.
  • ListView και GridView - για την εμφάνιση λιστών και πλέγματος με δυνατότητα προσαρμογής.
  • ResponsiveBuilder (από το πακέτο responsive_framework) - για την κατασκευή widget βάσει των σημείων διακοπής.
  • FittedBox - για την κλιμάκωση του παιδικού widget σύμφωνα με το μέγεθος του γονέα.
// Παράδειγμα χρήσης του MediaQuery
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text('Ανταποκρινόμενος σχεδιασμός'),
      ),
      body: Center(
        child: Text('Μέγεθος οθόνης: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
      ),
    );
  }
}
// Παράδειγμα χρήσης του LayoutBuilder
class AdaptiveContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth > 600) {
          // Ευρεία οθόνη
          return Container(
            color: Colors.blue,
            width: 300,
            height: 100,
            child: Center(child: Text('Ευρεία')),
          );
        } else {
          // Στενή οθόνη
          return Container(
            color: Colors.red,
            width: 100,
            height: 50,
            child: Center(child: Text('Στενή')),
          );
        }
      },
    );
  }
}
// Παράδειγμα χρήσης του Expanded
class FlexibleLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          color: Colors.yellow,
          width: 50,
          height: 50,
        ),
        Expanded( // θα καταλάβει τον υπόλοιπο χώρο
          child: Container(
            color: Colors.green,
            height: 50,
          ),
        ),
      ],
    );
  }
}