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

(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: [
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),