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.ExpandedetFlexible- pour répartir l'espace de manière flexible entre les éléments dansRowouColumn.SingleChildScrollView- pour faire défiler le contenu si celui-ci dépasse la zone accessible.ListViewetGridView- pour afficher des listes et des grilles avec capacité d'adaptation.ResponsiveBuilder(du packageresponsive_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,
),
),
],
);
}
}