Flutter Responsive Layouts
Construire des mises en page Flutter adaptatives — LayoutBuilder, MediaQuery, Expanded/Flexible
- Quoi
- Construire des mises en page Flutter adaptatives — LayoutBuilder, MediaQuery, Expanded/Flexible
- Coût
- Gratuit
- Prérequis
- un projet Flutter avec le SDK Flutter installé
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — un guide de mise en page adaptative pour Flutter : mesurer l'espace disponible avec précision (MediaQuery.sizeOf pour la fenêtre d'app, LayoutBuilder pour l'espace alloué par le parent — jamais le type de matériel, car les apps tournent dans des fenêtres redimensionnables, modes multi-fenêtres et image-dans-l'image), distribuer l'espace avec Expanded/Flexible, et suivre la règle centrale de mise en page — les contraintes descendent, les tailles remontent, le parent positionne. Inclut des flux de travail pour construire une mise en page adaptative et optimiser pour les grands écrans. Distinct de l'autre fiche flutter (flutter-apply-architecture-best-practices, sur l'architecture en couches) — celui-ci est purement la mécanique de mise en page. Crédit : @flutter. Bémols honnêtes : nécessite un projet Flutter ; c'est un guide de mise en page avec exemples — il ne redessinera pas votre hiérarchie visuelle à votre place. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Prérequis : un projet Flutter avec le SDK Flutter installé Installe-moi « Mises en page Flutter adaptatives ». Construire des mises en page Flutter adaptatives — LayoutBuilder, MediaQuery, Expanded/Flexible Dépôt : https://github.com/flutter/agent-plugins/blob/main/skills/flutter-build-responsive-layout/SKILL.md 1. Récupère le fichier SKILL.md du skill flutter-flutter-build-responsive-layout depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « flutter-flutter-build-responsive-layout ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. tout compte, clé API ou outil CLI mentionné dans les prérequis ci-dessus). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, tu peux l'utiliser ; sinon, l'accès public suffit. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Ne me demande jamais de coller des secrets dans le chat ; les identifiants passent par le coffre sécurisé ou des variables d'environnement. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.