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: [
       Expanded(child: TextField()),
       OtherWidget(),
     ],
   )
   

2. Use Flexible

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

3. Wrap it in Container or SizedBox and provide width

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