Résolution des erreurs de mise en page Flutter

Contenu

• Diagnostics des violations de contraintes
• Flux de résolution des erreurs de mise en page
• Exemples

Diagnostics des violations de contraintes

La mise en page Flutter fonctionne selon une règle stricte : Les contraintes descendent. Les tailles montent. Le parent définit la position. Les erreurs de mise en page se produisent lorsque cette négociation échoue, généralement en raison 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 lorsqu'un widget scrollable (ListView, GridView) est placé à l'intérieur d'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 lorsqu'un TextField ou TextFormField est placé à l'intérieur d'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 lorsqu'un enfant d'une Row ou Column demande une taille plus grande que les contraintes allouées par le parent. Visuellement indiquée par des bandes d'avertissement jaunes et noires.
• "Incorrect use of ParentData widget" : Déclenchée lorsqu'un ParentDataWidget n'est pas un descendant direct de son ancêtre requis. (par exemple, Expanded en dehors d'un Flex, Positioned en dehors d'un Stack).
• "RenderBox was not laid out" : Erreur d'effet en cascade. Ignorez ceci et recherchez plus haut dans la pile d'appels 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 liste de contrôle pour résoudre systématiquement les violations de contraintes 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 débordant en l'enveloppant dans un widget Expanded (pour le forcer à s'adapter) ou un widget 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.
• [ ] Exécutez le validateur -> examinez les erreurs -> corrigez : Inspectez l'interface utilisateur pour vérifier que l'écran d'erreur rouge/gris ou les bandes de débordement jaunes/noires sont résolus. Si de nouvelles erreurs de mise en page apparaissent, répétez le flux de travail.

Exemples

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

Entrée (état d'erreur) :

// Lance "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) :

// Lance "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) :

// Lance "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.'),
    ),
  ],
)