TextField à l'intérieur de Row provoque une exception de mise en page : Impossible de calculer la taille

Question

Je reçois une exception de rendu que je ne comprends pas comment résoudre. J'essaie de créer une colonne à trois rangées.

Rangée [Image]

Row [TextField]

Rangée [Boutons]

Voici mon code pour construire le conteneur :

Container buildEnterAppContainer(BuildContext context) {
    var container = new Container(
      padding: const EdgeInsets.all(8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          buildImageRow(context),
          buildAppEntryRow(context),
          buildButtonRow(context)
        ],
      ),
    );
    return container;
  }

et mon code buildAppEntryRow pour le conteneur de texte

Widget buildAppEntryRow(BuildContext context) {
    return new Row(
      children: <Widget>[
        new TextField(
          decoration: const InputDecoration(helperText: "Enter App ID"),
          style: Theme.of(context).textTheme.body1,
        )
      ],
    );
  }

Lorsque je l'exécute, j'obtiens l'exception suivante :

I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

Si je change buildAppEntryRow en un simple TextField comme ceci

 Widget buildAppEntryRow2(BuildContext context) {
    return new TextField(
      decoration: const InputDecoration(helperText: "Enter App ID"),
      style: Theme.of(context).textTheme.body1,
    );
  }

Je ne reçois plus l'exception. Qu'est-ce qui m'échappe dans l'implémentation de Row et qui empêche le calcul de la taille de cette ligne ?

Answer 1

(Je suppose que vous utilisez un Row parce que vous voulez mettre d'autres widgets à côté de la TextField à l'avenir).

Le site Row widget veut déterminer la taille intrinsèque de ses enfants non flexibles afin de savoir combien d'espace il lui reste pour les enfants flexibles. Cependant, TextField n'a pas de largeur intrinsèque ; il sait seulement comment s'adapter à la largeur totale de son conteneur parent. Essayez de l'envelopper dans un Flexible ou Expanded pour dire à la Row que vous attendez le TextField pour occuper l'espace restant :

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),

Answer 2

Vous obtenez cette erreur parce que TextField s'étend dans la direction horizontale et il en va de même pour le Row Nous devons donc restreindre la largeur de l'écran de l'utilisateur. TextField il existe de nombreuses façons de le faire.

1. Utilisez Expanded

    Row(
     children: <Widget>[
       Expanded(child: TextField()),
       OtherWidget(),
     ],
   )

2. Utilisez Flexible

   Row(
     children: <Widget>[
       Flexible(child: TextField()),
       OtherWidget(),
     ],
   )

3. Enveloppez-le dans Container ou SizedBox et fournir width

   Row(
     children: <Widget>[
       SizedBox(width: 100, child: TextField()),
       OtherWidget(),
     ],
   )

Answer 3

Vous devez utiliser Flexible pour utiliser un champ de texte dans une ligne.

new Row(
              children: <Widget>[
                new Text("hi there"),
                new Container(
                  child:new Flexible(
                        child: new TextField( ),
                            ),//flexible
                ),//container

              ],//widget
            ),//row

Answer 4

Comme @Asif Shiraz l'a mentionné, j'ai eu le même problème et je l'ai résolu en enveloppant la colonne dans un flexible, ici comme ceci,

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
          body: Row(
            children: <Widget>[
              Flexible(
                  child: Column(
                children: <Widget>[
                  Container(
                    child: TextField(),
                  )
                  //container
                ],
              ))
            ],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
        ));
  }
}

Answer 5

Une solution simple consiste à envelopper votre Text() à l'intérieur d'un Container() . Ainsi, votre code sera comme :

Container(
      child: TextField()
)

Ici, vous disposez également des attributs de largeur et de hauteur d'un conteneur pour ajuster l'apparence de votre champ de texte. Il n'est pas nécessaire d'utiliser Flexible si vous insérez votre champ de texte à l'intérieur d'un conteneur.