Résolution des erreurs de mise en page Flutter

Contenu

• Diagnostics de violation de contrainte
• Flux de résolution des erreurs de mise en page
• Exemples

Diagnostics de violation de contrainte

Flutter applique une règle stricte de mise en page : Les contraintes descendent. Les tailles remontent. Le parent définit la position. Les erreurs de mise en page surviennent quand cette négociation échoue, généralement à cause de contraintes illimitées ou d'enfants non contraints.

Diagnostiquez les défaillances de mise en page en utilisant les signatures d'erreur suivantes :

• « Vertical viewport was given unbounded height » : Déclenchée quand un widget scrollable (ListView, GridView) est placé dans un parent vertical non contraint (Column). Le parent fournit une hauteur infinie, et l'enfant tente de s'étendre infiniment.
• « An InputDecorator...cannot have an unbounded width » : Déclenchée quand un TextField ou TextFormField est placé dans un parent horizontal non contraint (Row). Le champ de texte tente de déterminer sa largeur en fonction de l'espace disponible infini.
• « RenderFlex overflowed » : Déclenchée quand un enfant d'un Row ou Column demande une taille plus grande que les contraintes allouées par le parent. Indiquée visuellement par des rayures d'avertissement jaunes et noires.
• « Incorrect use of ParentData widget » : Déclenchée quand un ParentDataWidget n'est pas un enfant direct de son ancêtre requis. (p. ex., Expanded en dehors d'un Flex, Positioned en dehors d'un Stack).
• « RenderBox was not laid out » : Une erreur en cascade. Ignorez ceci et cherchez plus haut dans la stack trace la violation de contrainte primaire (généralement une erreur de hauteur/largeur illimitée).

Flux de résolution des erreurs de mise en page

Copiez et utilisez cette checklist pour résoudre systématiquement les violations de contrainte de mise en page.

Progression des tâches

• [ ] Exécutez l'application en mode debug pour capturer l'exception de mise en page exacte dans la console.
• [ ] Identifiez le message d'erreur primaire (ignorez les erreurs en cascade « RenderBox was not laid out »).
• [ ] Appliquez le correctif conditionnel en fonction du type d'erreur spécifique :
  • Si « Vertical viewport was given unbounded height » : Enveloppez l'enfant scrollable (ListView, GridView) dans un widget Expanded pour consommer l'espace restant, ou enveloppez-le dans un SizedBox pour fournir une contrainte de hauteur absolue.
  • Si « An InputDecorator...cannot have an unbounded width » : Enveloppez le TextField ou TextFormField dans un widget Expanded ou Flexible.
  • Si « RenderFlex overflowed » : Contraignez l'enfant qui déborde en l'enveloppant dans un widget Expanded (pour le forcer à tenir) ou Flexible (pour lui permettre d'être plus petit que l'espace alloué).
  • Si « Incorrect use of ParentData widget » : Déplacez le ParentDataWidget pour qu'il soit un enfant direct de son parent requis. Assurez-vous que Expanded/Flexible sont des enfants directs de Row/Column/Flex. Assurez-vous que Positioned est un enfant direct de Stack.
• [ ] Exécutez Flutter hot reload.
• [ ] Lancez la validation → consultez les erreurs → corrigez : Inspectez l'interface utilisateur pour vérifier que l'écran d'erreur rouge/gris ou les rayures de débordement jaune/noir sont résolus. Si de nouvelles erreurs de mise en page apparaissent, répétez le flux.

Exemples

Correction de la hauteur illimitée (ListView dans Column)

Entrée (État d'erreur) :

// Déclenche "Vertical viewport was given unbounded height"
Column(
  children: <Widget>[
    const Text('Header'),
    ListView(
      children: const <Widget>[
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
      ],
    ),
  ],
)

Sortie (État résolu) :

// Enveloppez ListView dans Expanded pour contraindre sa hauteur à l'espace restant de Column
Column(
  children: <Widget>[
    const Text('Header'),
    Expanded(
      child: ListView(
        children: const <Widget>[
          ListTile(title: Text('Item 1')),
          ListTile(title: Text('Item 2')),
        ],
      ),
    ),
  ],
)

Correction de la largeur illimitée (TextField dans Row)

Entrée (État d'erreur) :

// Déclenche "An InputDecorator...cannot have an unbounded width"
Row(
  children: [
    const Icon(Icons.search),
    TextField(), 
  ],
)

Sortie (État résolu) :

// Enveloppez TextField dans Expanded pour contraindre sa largeur à l'espace restant de Row
Row(
  children: [
    const Icon(Icons.search),
    Expanded(
      child: TextField(),
    ),
  ],
)

Correction du débordement RenderFlex

Entrée (État d'erreur) :

// Déclenche "A RenderFlex overflowed by X pixels on the right"
Row(
  children: [
    const Icon(Icons.info),
    const Text('This is a very long text string that will definitely overflow the available screen width and cause a RenderFlex error.'),
  ],
)

Sortie (État résolu) :

// Enveloppez le widget Text dans Expanded pour le forcer à s'enrouler dans les contraintes disponibles
Row(
  children: [
    const Icon(Icons.info),
    Expanded(
      child: const Text('This is a very long text string that will definitely overflow the available screen width and cause a RenderFlex error.'),
    ),
  ],
)