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

Question

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 ]

<

Answer 1

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.

1. Use Expanded

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

2. Use Flexible

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

3. Wrap it in Container or SizedBox and provide width

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

Answer 2

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

Answer 3

I had the same problem.

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

Answer 4

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.

Answer 5

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))),
            ),
          ),
        ),
      ],
    ),

Answer 6

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