TextField innerhalb der Zeile verursacht eine Layoutausnahme: Die Größe kann nicht berechnet werden

Ich erhalte eine Rendering-Ausnahme, deren Behebung ich nicht verstehe. Ich versuche eine Spalte mit 3 Zeilen zu erstellen.

Zeile [Bild]

Zeile [TextField]

Zeile [Schaltflächen]

Hier ist mein Code zum Erstellen des Containers:

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;
  }

und mein buildAppEntryRow-Code für den Textcontainer

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

Wenn ich laufe, erhalte ich die folgende Ausnahme:

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)

Wenn ich buildAppEntryRow stattdessen in ein TextField ändere

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

Ich bekomme keine Ausnahme mehr. Was fehlt mir bei der Zeilenimplementierung, die dazu führt, dass die Größe dieser Zeile nicht berechnet werden kann?

(Ich gehe davon aus, dass Sie ein verwenden, Rowweil Sie TextFieldin Zukunft andere Widgets neben das stellen möchten .)

Das RowWidget möchte die Größe seiner nicht flexiblen Kinder bestimmen, damit es weiß, wie viel Platz es für die flexiblen Kinder übrig hat. Hat TextFieldjedoch keine intrinsische Breite; Es weiß nur, wie es sich auf die volle Breite seines übergeordneten Containers skaliert. Versuchen Sie, es in ein Flexibleoder Expandedzu wickeln , um zu sagen, Rowdass Sie erwarten TextField, dass das den verbleibenden Platz einnimmt:

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

Sie erhalten diesen Fehler, weil er TextFieldsich in horizontaler Richtung ausdehnt, ebenso wie der Row. Daher müssen wir die Breite des einschränken. TextFieldEs gibt viele Möglichkeiten, dies zu tun.

1. Verwenden Expanded

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

2. Verwenden Flexible

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

3. Wickeln Sie es in Containeroder SizedBoxund sorgen Sie dafürwidth

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

Sie sollten Flexible verwenden, um ein Textfeld innerhalb einer Zeile zu verwenden.

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


              ],//widget
            ),//row

Die Lösung besteht darin, Text()eines der folgenden Widgets einzuschließen: Entweder Expandedoder Flexible. Ihr Code mit Expanded lautet also wie folgt:

Expanded(
           child: TextField(
             decoration: InputDecoration(
               hintText: "Demo Text",
               hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
              ),
           ),
        ),

Wie @Asif Shiraz erwähnte, hatte ich das gleiche Problem und löste dieses Problem, indem ich Column in a Flexible einwickelte.

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,
          ),
        ));
  }
}

Eine einfache Lösung besteht darin, Ihr Text()Inneres einzuwickeln Container(). Ihr Code lautet also wie folgt:

Container(
      child: TextField()
)

Hier erhalten Sie auch das Attribut width und height eines Containers, um das Erscheinungsbild Ihres Textfelds anzupassen. Keine Notwendigkeit zu verwenden, Flexiblewenn Sie Ihr Textfeld in einen Container einschließen.