'TextField inside of Row causes layout exception: Unable to calculate size

I’m getting a rendering exception that I don’t understand how to fix. I’m attempting to create a column that has 3 rows.

Row [Image]

Row [TextField ]

Row [Buttons]

Here is my code to build the container:

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

and my buildAppEntryRow code for the text container

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

When I run I get the following exception:

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)

If i change buildAppEntryRow to just a TextField instead like this

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

I no longer get the exception. What am I missing with the Row implementation that is causing it to not be able to calculate the size of that row?

Solution 1:^[1]

(I assume you're using a Row because you want to put other widgets beside the TextField in the future.)

The Row widget wants to determine the intrinsic size of its non-flexible children so it knows how much space that it has left for the flexible ones. However, TextField doesn't have an intrinsic width; it only knows how to size itself to the full width of its parent container. Try wrapping it in a Flexible or Expanded to tell the Row that you're expecting the TextField to take up the remaining space:

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

Solution 2:^[2]

You get this error because TextField expands in horizontal direction and so does the Row, so we need to constrain the width of the TextField, there are many ways of doing it.

Use Expanded

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

Use Flexible

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

Wrap it in Container or SizedBox and provide width

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

Solution 3:^[3]

you should use Flexible to use a Textfield inside a row.

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


              ],//widget
            ),//row

Solution 4:^[4]

As @Asif Shiraz mentioned I had same issue and solved this by Wrapping Column in a Flexible, here like this,,

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

Solution 5:^[5]

The solution is to wrap your Text() inside one of the following widgets: Either Expanded or Flexible. So, your code using Expanded will be like:

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

Solution 6:^[6]

Row(
      children: [
        Expanded(
          flex: 1,
          child: Padding(
            padding: EdgeInsets.only(left: 5.0,right: 5.0),
            child: TextFormField(
              controller: commentController,
              validator: (String value){
                if(value.isEmpty){
                  // ignore: missing_return
                  return 'Comment cannot be blank.';
                }
              },
              decoration: InputDecoration(
                  labelText: "Comment",
                  labelStyle: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.bold,
                      color: Colors.grey),
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.green))),
            ),
          ),
        ),
      ],
    ),

Solution 7:^[7]

The InputDecoration of a TextField can cause an infinite width problem when placed inside a Row. Flutter explains this in the InputDecoration constraints property documentation:

Typically the decorator will fill the horizontal space it is given. ... If null, then the ambient ThemeData.inputDecorationTheme's InputDecorationTheme.constraints will be used. If that is null then the decorator will fill the available width with a default height based on text size.

So, the good news is that the width of a TextField can be constrained without the use of surrounding widgets like Expanded. Simply provide an instance of BoxConstraints to the constraints parameter of the InputDecoration that the TextField widget uses:

const TextField(
  decoration: InputDecoration(
    constraints: BoxConstraints.tightFor(
          width: 200,
    ),
  ),
)

As mentioned in the Flutter documentation above, a set of constraints can be applied to several widgets at once by using a Theme with a ThemeData that specifies an InputDecorationTheme with the desired constraints for descendent widgets of the Theme to inherit from and use.

Solution 8:^[8]

I had the same problem.

If you want, you can use Table widget to avoid this kind of issue with TextField

Solution 9:^[9]

A simple solution is to wrap your Text() inside a Container(). So, your code will be like:

Container(
      child: TextField()
)

Here you also get the width and height attribute of a container to adjust the look and feel of your text field. No need to use Flexible if you are wrapping your text field inside of a Container.

Solution 10:^[10]

If you want your TextField to size itself horizontally based on its content then you can wrap it with IntrinsicWidth widget.

Row(
 children: [
    Text("From"),
    SizedBox(width: 10,),
    IntrinsicWidth(child: TextField(
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
        hintText:  "Start Date Start Date Start Date",
        hintStyle: TextStyle(color: Colour.pBlue, fontSize: 14),
        border: InputBorder.none,
      ),
    ),),
            SizedBox(width: 10,),
            Text("To"),
            SizedBox(width: 10,),
            IntrinsicWidth(child:  IntrinsicWidth(child: TextField(
     textAlignVertical: TextAlignVertical.center,
      decoration: InputDecoration(
        hintText:  "End Date",
        hintStyle: TextStyle(color: Colour.pBlue, fontSize: 14),
        border: InputBorder.none,
      ),
    ),)),
          ],
        )

But before using it in your code make sure to know what Flutter says about this widget.

Creates a widget that sizes its child to the child's intrinsic width. This class is relatively expensive. Avoid using it where possible.

Solution 11:^[11]

the best solution is with absouluts space values

        Row(
          children: <Widget>[
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.3, 
              child: _telephonePrefixInput()
            ),
            SizedBox(width: MediaQuery.of(context).size.width * 0.02),
            Expanded(child: _telephoneInput()),
          ],
        ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Collin Jackson
Solution 2	CopsOnRoad
Solution 3	Mr. Roshan
Solution 4	Shahzad Akram
Solution 5	AAEM
Solution 6	David Buck
Solution 7
Solution 8	Jorge Wander Santana Ureña
Solution 9	vs_lala
Solution 10	Rohan Navlakhe
Solution 11	Miguel Ángel V

'TextField inside of Row causes layout exception: Unable to calculate size

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]