flutter-build-responsive-layout
Ce skill fait partie du repository officiel flutter/skills, maintenu directement par l'équipe Flutter. Il fournit à un agent des directives précises et des exemples concrets pour implémenter des layouts adaptatifs dans une application Flutter, capables de s'ajuster élégamment aux différents facteurs de forme : mobile, tablette et desktop.
Ce que contient ce skill
Le SKILL.md est entièrement rédigé et opérationnel. Il couvre quatre grandes thématiques :
- Mesure de l'espace disponible : privilégier
LayoutBuilderetMediaQuery.sizeOf(context)plutôt que l'orientation ou la détection du type d'appareil. - Sizing et contraintes : utilisation de
Expanded,Flexible,ConstrainedBoxetBoxConstraintspour contrôler la distribution de l'espace. - Comportements multi-appareils : ne pas verrouiller l'orientation, supporter souris, trackpad et clavier.
- Deux workflows pas-à-pas : construction d'un layout adaptatif via
LayoutBuilder, et optimisation pour les grands écrans avecConstrainedBoxouGridView.builder.
Des exemples de code Dart complets illustrent chaque workflow directement dans le skill.
Comment l'utiliser
Une fois le skill installé dans votre projet via npx skills add flutter/skills --skill '*' --agent universal, un agent compatible (Cursor, Copilot, Claude, etc.) peut s'appuyer sur ces instructions pour générer ou refactoriser du code Flutter respectant les bonnes pratiques de responsive design recommandées par l'équipe Flutter.
Il est particulièrement utile lorsqu'une interface doit s'afficher correctement aussi bien sur un smartphone que sur une fenêtre redimensionnable de desktop, ou dans des contextes multi-fenêtres et picture-in-picture.