Sobes.tech
Middle

Quels widgets dans Flutter offrent une mise en page adaptative?

sobes.tech IA

Réponse de l'IA

  • MediaQuery - pour obtenir des informations sur la taille et l'orientation de l'écran.
  • LayoutBuilder - pour construire des widgets en fonction des contraintes du widget parent.
  • OrientationBuilder - pour construire des widgets en fonction de l'orientation de l'écran.
  • FractionallySizedBox - pour créer des éléments avec une taille proportionnelle à l'espace disponible.
  • AspectRatio - pour maintenir un rapport d'aspect spécifique de l'élément.
  • Expanded et Flexible - pour répartir l'espace de manière flexible entre les éléments dans Row ou Column.
  • SingleChildScrollView - pour faire défiler le contenu si celui-ci dépasse la zone accessible.
  • ListView et GridView - pour afficher des listes et des grilles avec capacité d'adaptation.
  • ResponsiveBuilder (du package responsive_framework) - pour construire des widgets en fonction des points de rupture.
  • FittedBox - pour mettre à l'échelle le widget enfant selon la taille du parent.
// Exemple d'utilisation de MediaQuery
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text('Design adaptatif'),
      ),
      body: Center(
        child: Text('Taille de l'écran : ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
      ),
    );
  }
}
// Exemple d'utilisation de LayoutBuilder
class AdaptiveContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth > 600) {
          // Écran large
          return Container(
            color: Colors.blue,
            width: 300,
            height: 100,
            child: Center(child: Text('Large')),
          );
        } else {
          // Écran étroit
          return Container(
            color: Colors.red,
            width: 100,
            height: 50,
            child: Center(child: Text('Étroit')),
          );
        }
      },
    );
  }
}
// Exemple d'utilisation de Expanded
class FlexibleLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          color: Colors.yellow,
          width: 50,
          height: 50,
        ),
        Expanded( // Prendra l'espace restant
          child: Container(
            color: Colors.green,
            height: 50,
          ),
        ),
      ],
    );
  }
}