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?
(I assume you're using a
Row
because you want to put other widgets beside theTextField
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 aFlexible
orExpanded
to tell theRow
that you're expecting theTextField
to take up the remaining space: